美文网首页
turbolinks 跨页背景音乐播放

turbolinks 跨页背景音乐播放

作者: aoners | 来源:发表于2023-08-23 16:15 被阅读0次

    html代码:

    <div class="bgm-wrap">
        <div id="bgm" class="bgm"></div>
      </div>
    

    js代码

    $(document).on('turbolinks:load', function(){
      if(!window.audio){
        window.audio = document.createElement('audio') //生成一个audio元素 
        window.audio.src = '/images/zwwl.ogg' //音乐的路径 
        window.audio.id = 'ma'
      }
      $("#bgm").append(window.audio) //把它添加到页面中
      if(window.audio !== null) {
        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
        //alert(audio.paused);
        if(window.audio.paused) {
          $(".bgm").removeClass("rotate")
        } else {
          $(".bgm").addClass("rotate")
        }
      }
    
      $(".bgm").bind("click", function bf() {
        if(window.audio !== null) {
          //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
          //alert(audio.paused);
          if(window.audio.paused) {
            window.audio.play(); //audio.play();// 这个就是播放
            $(".bgm").addClass("rotate")
          } else {
            window.audio.pause(); // 这个就是暂停
            $(".bgm").removeClass("rotate")
          }
        }
      })
    })
    

    相关文章

      网友评论

          本文标题:turbolinks 跨页背景音乐播放

          本文链接:https://www.haomeiwen.com/subject/mdbpmdtx.html