HTML5 標(biāo)簽

在網(wǎng)頁內(nèi)使用HTML5的Audio標(biāo)簽。
具體的可以看 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)頁載入速度。

1. 網(wǎng)上下載一個適合的背景音樂MP3
2. 導(dǎo)入iTunes
3. 在iTunes右鍵該音樂- Get info - Options - 調(diào)整start和stop的值，截取一段音樂
4. 右鍵音樂- Create MP3 Version ，然后 iTunes 會根據(jù) start 和stop的值截取生成一個副本。
5. 右鍵副本 - show in Finder， 打開音樂目錄
6. 使用 brew 安裝 lame brew install lame
7. 使用LAME壓縮MP3音頻，個人覺得音樂要求不高的話可以用16Kb/s的速率
   lame --mp3input -b 16 input-file-name.mp3 output.mp3
8. 然后使用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();
            }
        }});