turbolinks 跨页背景音乐播放

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")
      }
    }
  })
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容