移动端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然后再让他播放就可以实现两个音频同时播放的效果

 

转载于:https://www.cnblogs.com/kingsnowcan/p/H5_audio_20190422.html