audio播放、暂停事件监听，以及自动播放

播放、暂停事件监听

html

<div class="reading_audio_wrapper">
    <audio id="audio1" controls="controls">
   　　 <!-- <source src="./img/test.mp3" type="audio/ogg" /> -->
       <source src="https://img.tukuppt.com/newpreview_music/08/99/98/5c88efa0678f784780.mp3" type="audio/mpeg" />
         Your browser does not support the audio element.
    </audio>
 </div>

js 

let audio_f=$(".reading_audio_wrapper audio")[0];
        audio_f.addEventListener("play", function () {   //开始播放时触发
            $(".reading_audio_play,.reading_audio_bgBox").addClass("play")
            console.log("event play: " + (new Date()).getTime());
        });
        audio_f.addEventListener("pause", function () {   // 暂停时会触发，当播放完一首歌曲时也会触发
            $(".reading_audio_play,.reading_audio_bgBox").removeClass("play")
            console.log("event pause: " + (new Date()).getTime());
        })
        audio_f.addEventListener("ended",function(){
            $(".reading_audio_play,.reading_audio_bgBox").removeClass("play")
            console.log("pause---ednded")
            audio_f.pause();
        },false);

使用jq的语法时一定要注意let audio_f=$(".reading_audio_wrapper audio")[0];   使用原生的可以直接let audio_f=document.getElementById('audio1')。使用jq没选取第一个元素改了一个多小时才弄好。

2.音乐自动播放

function audioAutoPlay(id) {
      const audio = document.getElementById(id);
      const play = function () {
        audio.play();
        document.removeEventListener('touchstart', play, false);
      };
      audio.play();
      document.addEventListener('WeixinJSBridgeReady', () => { // 微信
        play();
      }, false);
      document.addEventListener('YixinJSBridgeReady', () => { // 易信
        play();
      }, false);
      document.addEventListener('touchstart', play, false);
    }
    audioAutoPlay('audio');

css、去除audio  focus状态时的默认样式

audio:focus{
  outline:none;
}

 audio标签的事件流  https://blog.csdn.net/liubangbo/article/details/86536422