移動端h5 實現多個音頻播放

前一段時間做到一個項目，其中用到很多之前沒用過的東西，其中一個就是h5的多音頻實現，背景音頻和說話同時播放，其中出現了很多問題，不過總算找到了解決方案。

平時做H５如果只有一個音樂的話就直接在頁面里面添加一個audio標簽，具體這個標簽怎么使用，有哪些屬性可以參考http://www.runoob.com/tags/ref-av-dom.html

<audio id="backMusic"  src="music.mp3" autoplay loop></audio> <!--音樂-->
今天就來解決一下，怎么播放多個音頻文件
剛開始我的方法是在H5頁面放很多音頻，也就是很多audio標簽，發現蘋果手機不兼容，它只能播放一個音頻，暫停上一個，下一個也不會播放，后面網上查找了一下，說蘋果微信自帶播放音頻的只能同時播放一個，然后只能暫停背景音樂去播放說話的聲音
這個我是通過動態修改audio標簽的src屬性
下面是我定義的音樂的文件，打開頁面自動播放背景音樂

  var backMusic = document.getElementById("backMusic");

        setTimeout(function(){
            backMusic.play();
            music.play();

        },100)
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        music.play();

        backMusic.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            music.play();
            backMusic.play();
        }, false);

　　然后我又在需要說話的時候把這個背景音樂的src的值動態改變為需要播放的音頻

                       music.pause();
                                 music.src="fumu.mp3";//父母嘮叨
                                 setTimeout (function(){
                               
                                     music.play();

								 },2000);

　　這樣只能實現單個音頻播放，但是要實現多個音頻同時播放還是沒解決，后來又看了別人發的一個項目參考了一下，進行了嘗試，發現居然可以了

       

//定義
<div class="audiopalyer" style="display: none">
	<audio id="backMusic"  src="music.mp3" autoplay loop></audio> <!--背景音樂-->
</div>
<div class="talkplay" style="display: none">
	<audio id="audios"   src="music.mp3" ></audio>//中間穿插的和背景音樂同時播放的音頻

</div>

//js
  var music = document.getElementById("audios");
  var backMusic = document.getElementById("backMusic");
    setTimeout(function(){
      audioAutoPlay();
        },100)
   //打開微信自動播放音頻
   document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        music.play();

        backMusic.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            music.play();
            backMusic.play();
        }, false);


//需要兩個音頻同時播放的時候
   music.pause();
                              
  music.src="fumu.mp3";//父母嘮叨
                                 
  setTimeout (function(){                                
     music.play();},2000);

　　

　　既然微信自帶的播放器只能播放一個音頻，那如果用別的音頻軟件去同時播放別的音樂應該是可以的，就這樣我把兩個音頻分別放到不同的div里面，相當於把他們兩個隔開了，然后再獲取這兩個標簽，讓他們開始的時候同時播放，然后暫停那個需要替換音頻資源的

等到需要播放說話聲音的時候就直接替換src然后再讓他播放就可以實現兩個音頻同時播放的效果