HTML5 標簽
在網(wǎng)頁內(nèi)使用HTML5的Audio標簽。
具體的可以看 MDN手冊
<audio id="audio" autoplay loop>>
<source src="./assets/1.mp3" type="audio/mpeg">
</audio>
我在做微信內(nèi)嵌頁面開放的時候，發(fā)現(xiàn)loop屬性不起作用，于是加了一段JavaScipt腳本控制循環(huán)播放
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）
網(wǎng)上下載的MP3音樂往往是好幾MB的完整歌曲，作為背景音樂我們只需要其中一段金矛，而且音質(zhì)要求不高芯急，所以進行剪切與壓縮處理，提高網(wǎng)頁載入速度驶俊。
- 網(wǎng)上下載一個適合的背景音樂MP3
- 導入iTunes
- 在iTunes右鍵該音樂- Get info - Options - 調(diào)整start和stop的值娶耍，截取一段音樂
- 右鍵音樂- Create MP3 Version ，然后 iTunes 會根據(jù) 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
播放按鈕的實現(xiàn)
貿(mào)然出現(xiàn)一個音樂播放會對有些用戶造成干擾想鹰，所以盡量放一個按鈕來允許用戶關(guān)閉聲音。點擊按鈕药版，然后停止或者播放聲音辑舷，并且改變按鈕的狀態(tài)。在此獻上一段寫的非常丑槽片，但是能跑的代碼供參考何缓。
<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();
}
}});
