HTML5 标签
在网页内使用HTML5的Audio标签。
具体的可以看 MDN手册
<audio id="audio" autoplay loop>>
<source src="./assets/1.mp3" type="audio/mpeg">
</audio>
我在做微信内嵌页面开放的时候，发现loop属性不起作用，于是加了一段JavaScipt脚本控制循环播放
var audio = document.getElementById('audio');
if (typeof audio.loop == 'boolean')
{
audio.loop = true;
}
else
{
audio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
}
audio.play();
处理音频（使用Mac截取，压缩MP3）
网上下载的MP3音乐往往是好几MB的完整歌曲，作为背景音乐我们只需要其中一段，而且音质要求不高，所以进行剪切与压缩处理，提高网页载入速度。
- 网上下载一个适合的背景音乐MP3
- 导入iTunes
- 在iTunes右键该音乐- Get info - Options - 调整start和stop的值，截取一段音乐
- 右键音乐- Create MP3 Version ，然后 iTunes 会根据 start 和stop的值截取生成一个副本。
- 右键副本 - show in Finder， 打开音乐目录
- 使用 brew 安装 lame
brew install lame - 使用LAME压缩MP3音频，个人觉得音乐要求不高的话可以用16Kb/s的速率
lame --mp3input -b 16 input-file-name.mp3 output.mp3 - 然后使用output.mp3, 一段30s的音频基本可以控制在几十KB。
brew install lame
播放按钮的实现
贸然出现一个音乐播放会对有些用户造成干扰，所以尽量放一个按钮来允许用户关闭声音。点击按钮，然后停止或者播放声音，并且改变按钮的状态。在此献上一段写的非常丑，但是能跑的代码供参考。
<img class="voice-switch voloff" src="./assets/voice-on.png">
$(".voice-switch ").on({'touchstart':function(){
if (isVol){
$('.voice-switch ').attr('src', './assets/voice-off.png');
isVol = false;
audio.pause();
}else {
$('.voice-switch ').attr('src', './assets/voice-on.png');
isVol = true;
audio.play();
}
}});
