移动端背景音乐播放问题

移动端背景音乐播放问题

• 由于移动端的特殊性，不能像pc那样自动播放背景音乐，只有用户操作了才可以播放

<audio src="song.ogg" controls="controls" autoplay="autoplay">
Your browser does not support the audio tag.
</audio>

因此在移动端上面代码无效，可以给整个页面body或者一个按钮添加事件来触发音乐的播放

document.body.addEventListener('touchstart', function() {
	document.querySelector('audio').play();
});

• 触发事件后音乐延迟播放，一般就是触发事件，设置定时器去做，但是在UC中不能实现

document.body.addEventListener('touchstart', function() {
	const temporary = setTimeout(() =>{
        document.querySelector('audio').play();
        clearTimeout(temporary);
    }, 2000);
});

在微信等中上面代码没有问题，但是在UC中就敢不播放，如果你去掉定时器，在UC中是可以的。这样问题就应该出现在定时器上面。经过一番捯饬，发现如果先播放，再经过定时器控制是可以播放的，于是有了下面

document.body.addEventListener('touchstart', function() {
	document.querySelector('audio').play();
	document.querySelector('audio').pause();
	const temporary = setTimeout(() =>{
        document.querySelector('audio').play();
        clearTimeout(temporary);
    }, 2000);
});

现在问题解决了，但是又会出来另一个问题，浏览器报错

The play() request was interrupted by a call to pause()

大体意思是，play()之后不能太快执行pause()，于是有了下面

document.body.addEventListener('touchstart', function() {
	document.querySelector('audio').play();
    document.querySelector('audio').volume = 0;
    const temer = setTimeout(() =>{
        document.querySelector('audio').pause();
        clearTimeout(temer);
    }, 500);
	const temporary = setTimeout(() =>{
        document.querySelector('audio').play();
        document.querySelector('audio').volume = 1;
        clearTimeout(temporary);
    }, 2000);
});

• 音乐循环播放问题

<audio src="song.ogg" controls="controls" autoplay="autoplay" loop="loop">
Your browser does not support the audio tag.
</audio>

一般都会知道是加loop属性，但是有时候在UC中，它只会播放一次，有的音频却又可以循环播放。真的让人郁闷，冥思苦想找不到原因。经过一番折腾发现，一段音乐在经过截取压缩处理之后就不能循环播放了，没加工前却可以，那么问题应该是出在音频资源上。忠告，处理音乐最好使用专业软件，或者找专业人处理，自己处理的很有可能给自己挖坑！

• 后续

  • 事件touchstart有时候并不会生效，可以改成touchend，但是单独用这其中一个不能做到兼容全部，最好使用click事件，这个可以完美兼容。

  • 微信中自动播放

    document.addEventListener('WeixinJSBridgeReady', () => {
      document.querySelector('audio').play();
    }, false);