h5 audio 背景音乐播放开关控制

原创 2018年02月12日 11:11:26

现在的活动h5基本都会有bgm的需求,下面提供一个通用的做法。
这里写图片描述
这里写图片描述
上面是开关的按钮,页面刚加载进来的时候,音乐是自动播放的。点击开关按钮可以控制音乐的播放和暂停。
产品:需求很简单,怎么实现我不管!
开发:好!那我给你来个五彩斑斓的黑
html:

<!--背景音乐-->
<audio id="music" loop="loop" style="display: none;"></audio>
<!--音乐按钮-->
<div id="btn-music" >
    <img src="images/btn_music_on.png" alt="" id="btn-music-on" />
    <img src="images/btn_music_off.png" alt="" id="btn-music-off" class="hide" />
</div>

样式根据自己的需要来吧。
看看js:

var c = document.getElementById("music");
    c.src = "./mp4/bgm.mp3";
    c.play();
    //处理微信的时候
    document.addEventListener("WeixinJSBridgeReady", function(){
        if(typeof WeixinJSBridge == "object"){
            WeixinJSBridge.invoke("getNetworkType", {}, function(j){
                c.play();
            })
        }
    });
music_state = 1;
//音乐按钮
   $("#btn-music").on("click", function(){
    if(music_state){
        c.pause();
        music_state = 0;
        $("#btn-music-off").removeClass("hide");
        $("#btn-music-on").addClass("hide");
    }else{
        c.play();
        music_state = 1;
        $("#btn-music-on").removeClass("hide");
        $("#btn-music-off").addClass("hide");
    }
});
版权声明:本文为博主原创文章,未经博主允许可以随便转载。 https://blog.csdn.net/a419419/article/details/79315472

H5背景音乐自动播放和暂停

H5背景音乐自动播放
  • zhl_cafe
  • zhl_cafe
  • 2017-02-04 17:23:45
  • 2539

说说如何使用 HTML5 嵌入音频和视频(媒体标签)

HTML5 使用 audio 和 video 元素来嵌入音频和视频内容。另外还提供了与这两个标签相关的 JavaScript API,这样就可以创建我们自己的音视频控件咯: ...
  • deniro_li
  • deniro_li
  • 2017-07-25 15:28:45
  • 1582

HTML5:使用aduio标签打造音乐播放器

关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待。本文为该系列(HTML5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注。 ...
  • u011620579
  • u011620579
  • 2014-09-17 10:55:31
  • 556

如何在H5页面上添加音乐播放

在制作网页的时候,经常会遇到一些带音乐播放的场景,作品的右上角有一个音频按钮,会播放音乐,点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。         其实是很简单的,只需要简单几...
  • yerongtao
  • yerongtao
  • 2017-09-27 10:39:33
  • 5250

h5播放音乐

h5音频播放,里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp Your browser does not suppor...
  • u012011360
  • u012011360
  • 2015-06-03 18:51:16
  • 2618

HTML5+CSS3实现的列表式音乐播放器特效源码

  • 2015年08月28日 14:51
  • 229KB
  • 下载

h5 自定义简单的音乐播放器

这里实现的播放只有暂停/播放、显示进度条、当前时间、总时长的功能。(暂未封装成插件)        h5 提供了audio标签,供我们播放音乐资源。其兼容性先不考虑,但就样式而言,并不足以满...
  • SheldonJiang
  • SheldonJiang
  • 2015-11-20 08:37:03
  • 8609

HTML5 标签audio添加网页背景音乐代码

html5  是 HTML 5 的新标签,定义声音,比如音乐或其他音频流。HTML 5 标签HTML5 audio让音乐东山再起HTML5 运用aduio标签打造音乐播放器 可以在开始标签和结束标签...
  • sunboy_2050
  • sunboy_2050
  • 2015-09-21 09:07:11
  • 86547

【Egret】里使用audio标签达到默认播放背景音乐

" autoplay='autoplay' loop="loop">你的浏览器不支持audio标签。 function setBgm(play){ var bgm = document.get...
  • arvin0
  • arvin0
  • 2016-05-09 19:50:03
  • 11363

html5添加背景音乐

0、补充demo 把代码分离出来做了demo,大家需要的可以自行下载,下载地址:下载地址点这里 1、需求说明 html5添加背景音乐 2、问题解决 直接上代码吧 首先添加音乐控件的div ...
  • zyq527758142
  • zyq527758142
  • 2017-06-08 16:22:21
  • 1117
收藏助手
不良信息举报
您举报文章:h5 audio 背景音乐播放开关控制
举报原因:
原因补充:

(最多只允许输入30个字)