html5添加背景音乐

0、补充demo
把代码分离出来做了demo，大家需要的可以自行下载，下载地址：下载地址点这里
1、需求说明
html5添加背景音乐
2、问题解决
直接上代码吧
首先添加音乐控件的div

<div id="audio">   <div style="width: 45px;height:45px; position: fixed; top: 5px; right: 5px; font-size: 0;line-height: 0;z-index: 100;">        <audio id="audio_music" autoplay="autoplay" loop>        <source src="images/audio/KT60.mp3" type="audio/mpeg">        <source src="images/audio/KT600.aac" type="audio/mpeg">        <source src="images/audio/KT600.ogg" type="audio/ogg">        你的浏览器不支持audio标签。</audio>        <a id="audio_btn"><img src="images/audio/play.png" width="35" height="35" id="music_btn" border="0" style="float:right"></a>   </div></div>

js代码

<script>    $(document).ready(function () {        $("#audio_btn").click(function(){            var music = document.getElementById("audio_music");            if(music.paused){                music.play();                $("#music_btn").attr("src","images/audio/play.png");            }else{                music.pause();                $("#music_btn").attr("src","images/audio/pause.png");            }        });        var music = document.getElementById("audio_music");        $('html').one('touchstart',function(){            music.play();        });    });</script>

3、知识点
网页添加背景音乐
说明：由于系统限制，大部分IOS系统和少部分Android微信不支持自动播放。所以js中添加touch触发播放音乐。
不过我看好多html5都可以自动播放，网上没有找到更好的解决方案，如果大家知道怎么做的，请不吝赐教告知一下哈。