美文网首页
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")
      }
    }
  })
})

相关文章

  • cocos 播放音乐问题

    playMusic 播放背景音乐 背景音乐只有一个,当播放音乐A时,播放B时,A音乐会自动停止。 playEffe...

  • 背景音乐的开关

    最近写录音功能,考虑到背景音乐的影响,需要在录音和播放录音时将背景音乐暂停,在完成后继续背景音乐的播放。网上找到个...

  • turbolinks源码分析(转)

    Turbolinks5 是用 Coffeescript 编写. 学习 Turbolinks5 能够让你: 从根本上...

  • Turbolinks-iOS的demo运行爬坑

    1.Turbolinks-iOS是做什么的? turbolinks作用是提速javascript的渲染,使得app...

  • rails turbolinks 带来的一些问题

    turbolinks 本身是为了减少页面加载等效能问题,但是使用 turbolinks 经常会导致一些 js 插件...

  • 备忘

    加载背景音乐播放背景音乐(设置单曲循环)我方飞机诞生interval=0 while True:if 用户是否点击...

  • 三个Activity循环点击,返回只保留一个本身

    业务要求:FM播放页、主播主页、栏目详情页可以依托播放页循环点击(如:播放页——主播主页——播放页——栏目详情页)...

  • 1.7 背景音乐播放

    1、显示音乐播放图标 1.1 新增音乐播放图片 post-detail.wxml 1.2 添加音乐播放的CSS代码...

  • WeChat 背景音乐播放

    本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,...

  • 播放背景音乐的几种方法

    C#中播放背景音乐几种的方法 最经在写winform程序,其中有用到播放背景音乐 特此收集了一些网上的教程: 1、...

网友评论

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

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