网页内嵌背景音乐制作

HTML5 标签

在网页内使用HTML5的Audio标签。
具体的可以看 MDN手册

我在做微信内嵌页面开放的时候，发现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的完整歌曲，作为背景音乐我们只需要其中一段，而且音质要求不高，所以进行剪切与压缩处理，提高网页载入速度。

1. 网上下载一个适合的背景音乐MP3
2. 导入iTunes
3. 在iTunes右键该音乐- Get info - Options - 调整start和stop的值，截取一段音乐
4. 右键音乐- Create MP3 Version ，然后 iTunes 会根据 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

播放按钮的实现

贸然出现一个音乐播放会对有些用户造成干扰，所以尽量放一个按钮来允许用户关闭声音。点击按钮，然后停止或者播放声音，并且改变按钮的状态。在此献上一段写的非常丑，但是能跑的代码供参考。

        

        $(".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();
            }
        }});