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