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

迈不过友情╰ 2022-05-31 07:50 724阅读 0赞

现在的活动h5基本都会有bgm的需求，下面提供一个通用的做法。  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
上面是开关的按钮，页面刚加载进来的时候，音乐是自动播放的。点击开关按钮可以控制音乐的播放和暂停。  
产品：需求很简单，怎么实现我不管！  
开发：好！那我给你来个五彩斑斓的黑  
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");
        }
    });

[70]: /images/20220531/49212f4c51504ee2acf73bfd64a110c1.png
[70 1]: /images/20220531/7fc930a201f1426ebd8107d8668d63d1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，724人围观）

还没有评论，来说两句吧...

相关阅读

相关 MFC中播放背景音乐

、添加Lib文件 \pragma comment(lib, "Winmm.lib") 2、使用mciSendString是用来播放MP3 //播放背景音乐 mc...

深碍√TFBOYSˉ_/ 2024年04月17日 06:07/ 0 赞/ 94 阅读

相关 iOS后台播放背景音乐文件

iOS从4.0之后支持后台播放声音了。下面是实现声音文件播放，并且用户关闭屏幕之后仍然能够播放声音文件。具体的实现方法如下：在plist文件中加入下面的字段： [![im

素颜马尾好姑娘i/ 2023年10月18日 08:30/ 0 赞/ 64 阅读

相关 html5微信浏览器背景音乐播放

参考：[https://blog.csdn.net/doutao6677/article/details/51768486][https_blog.csdn.net_douta

Love The Way You Lie/ 2023年01月02日 02:21/ 0 赞/ 289 阅读

相关 audio 标签加入背景音乐谷歌浏览器不能自动播放的问题

在网上查阅相关资料才知道原来在4月份谷歌浏览器做了改革，不支持自动播放了，现贴出解决方案：由于audio.play()必须要在交互事件中才能使用，因此在项目中，我的解决方案

向右看齐/ 2022年12月26日 10:22/ 0 赞/ 635 阅读

相关 H5 自动播放背景音乐

html: <audio id="audio" controls loop autoplay preload hidden>

- 日理万妓/ 2022年09月11日 13:26/ 0 赞/ 281 阅读

相关 h5播放音乐

h5音频播放，里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp <audio control

拼搏现实的明天。/ 2022年08月05日 02:53/ 0 赞/ 317 阅读

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

现在的活动h5基本都会有bgm的需求，下面提供一个通用的做法。 ![这里写图片描述][70] ![这里写图片描述][70 1] 上面是开关的按钮，页面刚加载进来的时

迈不过友情╰/ 2022年05月31日 07:50/ 0 赞/ 725 阅读

相关解决audio控制播放音量

在写手机端项目时，可能会遇到使用audio播放音乐，那么怎样控制audio默认播放的音量呢？下面时解决办法 volume 属于是控制audio 播放音乐的音量，其范围

冷不防/ 2022年01月07日 15:07/ 0 赞/ 562 阅读

相关微信小程序之音乐控制播放（audio的API）

一.小知识 1.wx.getBackgroundAudioPlayerState(OBJECT)：获取后台音乐播放状态。 ![20170525145217682][]

淩亂°似流年/ 2021年09月12日 07:30/ 0 赞/ 1006 阅读

相关微信播放背景音乐

api->媒体->背景音频播放 wx.playBackgroundAudio({ dataUrl: '', titl

旧城等待，/ 2021年07月24日 15:53/ 0 赞/ 579 阅读