zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    移动web技能总结
    canvas绘图基础
    如何自定义滚动条?
    学习笔记-AngularJs(十)
    学习笔记-AngularJs(九)
    硬盘杀手!Windows版Redis疯狂占用C盘空间【转】
    64位win10系统无法安装.Net framework3.5的两种解决方法【转】
    分享一个电子书地址
    阿里、腾讯、百度、华为、京东、搜狗和滴滴最新面试题汇集【转】
    jQuery时间轴
  • 原文地址:https://www.cnblogs.com/nanacln/p/11127883.html
Copyright © 2011-2022 走看看