HTML5+ - audio音频播放及网络音频文件播放

时间:2019-08-04 发布者: 访问量:3089

1、介绍常用方法
createPlayer()创建音频对象

play: 开始播放音频

pause: 暂停播放音频

resume: 恢复播放音频

stop: 停止播放音频

seekTo: 跳到指定位置播放音频

getDuration: 获取音频流的总长度

getPosition: 获取音频流当前播放的位置

setRoute: 设置音频输出线路


2、一个音频播放器实例


<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">hello</h1>
</header>
<div class="mui-content">
    <div style="padding:10px;">
        <div>
            <img src="imgs/1.jpg" width="100%" />
        </div>
        <div>
               <div style="width:20%; margin:0 auto;" onclick="palyNow();">
<img src="imgs/play.png" width="100%" id="but1" /></div>
        </div>
    </div>
</div>
<script>
mui.init();
var player = null;
var btn1   = null;
function palyNow(){
    btn1   = mui('#but1');
    var playSrc = btn1[0].getAttribute('src');
    console.log(playSrc);
    //暂停
    if(playSrc == 'imgs/playing.png'){
        player.pause();
        btn1[0].setAttribute('src','imgs/zt.png');
        return false;
    }
    //恢复播放
    else if(playSrc == 'imgs/zt.png'){
        player.resume();
        btn1[0].setAttribute('src','imgs/playing.png');
        return false;
    }
    player = plus.audio.createPlayer('_www/audios/1.mp3');
    btn1[0].setAttribute('src','imgs/playing.png');
    player.play(function(){
        //播放完毕
        alert("Audio play success!");
    }, function (e){
        alert("Audio play error: " + e.message); 
    });
}
</script>
发布于
  用户评论
    生活编程