小虾虎鱼

小虾虎鱼

手机端网页控制声音的播放

作者 禾惠 发表于 2016/12/14 22:18 ,最后修改于 2016/12/15 09:50

HTML5中新增的Audio标签给音频的播放控制带来了不少的方便,该标签具有很多属性事件。但不好的消息是在现在的移动设备中基本上都无法直接自动播放声音或者控制声音(为什么会这样?为了省电?为了省流量?不知道)。从一些资料中得到,如果需要播放声音则需要通过用户的交互来获得播放声音的权限,问题的关键就是交互了。

正常写法

<audio autoplay="true" src="sound.mp3"></audio>

上面的代码在PC端浏览器中是会自动播放,在移动端就不能播放声音。

解决在移动端不能播放声音

前面已经讲到,在移动端需要播放声音则需要经过用户的交互才能得到播放的权限,那么我们可以在用户触摸屏幕时去播放声音,从而播放的权限。

var audio = document.createElement("audio");
audio.setAttribute("src", "sound.mp3");
document.addEventListener("touchstart", function () {
    audio.play();
});

setInterval(function () {
    audio.play();
}, 3000);

上面代码中,在打开页面后不触摸屏幕定时器中执行的audio.play()是不会播放声音的,当触摸屏幕后就会定时播放声音了。 细心的你应该发现,在触摸屏幕的一瞬间会自动播放声音,如果不需要在触摸屏幕时播放声音该怎么办? 在触摸播放时将声音静音再播放,播放完后再将声音还原,将上面的代码做点改进:

document.addEventListener("touchstart", function () {
    audio.muted = true;
    audio.play();
    audio.addEventListener("ended", function(){
        audio.muted = false;
    });
});

通过ended事件来监听声音的播放结束将声音还原。

实现播放通知声音和切换声音

为了避免不同浏览器支持的音频格式不一样,所以需要在audio标签里面嵌套source标签来解决这个问题。

<select>
    <option value="1">声音1</option>
    <option value="2">声音2</option>
    <option value="3">声音3</option>
</select>
<button>测试播放声音</button>

下面js代码用到了jQuery做事件的绑定(你也可以不用jQuery,方法不依赖于jQuery)。

var audio = document.createElement("audio");

function createSource(filename) {
    audio = document.createElement("audio");
    var mp3El = document.createElement("source");
    var oggEl = document.createElement("source");
    mp3El.setAttribute("src", filename + ".mp3");
    oggEl.setAttribute("src", filename + ".ogg");
    audio.appendChild(mp3El);
    audio.appendChild(oggEl);

    $(document).one("touchstart", function () {
        audio.muted = true;
        audio.play();
        $(audio).one("ended", function () {
            audio.muted = false;
        });
    });
}

/// 切换声音
$("select").on("change", function(){
    createSource(this.value);
});

/// 点击测试播放声音
$("button").on("click", function(){
    audio.play();
});

createSource(1);

基本上实现了声音的播放,但是每次切换声音(或者第一打开页面)都需要touchstart一次屏幕后才能正常的控制声音的播放。 另外,已知兼容问题:在UC浏览器和360浏览器中设置audio.muted = true或者audio.volume = 0都无法静音,暂时还没找到原因。

我欣赏你的好品味~

打开支付宝扫一扫