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

播放、暂停事件监听

html

<div class="reading_audio_wrapper">
    <audio  controls="controls">
    <!-- <source src="./img/test.mp3" type="audio/ogg" /> -->
       <source src="/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")
            ("event play: " + (new Date()).getTime());
        });
        audio_f.addEventListener("pause", function () {   // 暂停时会触发，当播放完一首歌曲时也会触发
            $(".reading_audio_play,.reading_audio_bgBox").removeClass("play")
            ("event pause: " + (new Date()).getTime());
        })
        audio_f.addEventListener("ended",function(){
            $(".reading_audio_play,.reading_audio_bgBox").removeClass("play")
            ("pause---ednded")
            audio_f.pause();
        },false);

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

2.音乐自动播放

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

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

audio:focus{
  outline:none;
}

 audio标签的事件流  /liubangbo/article/details/86536422