美文网首页
h5移动端更换背景音乐

h5移动端更换背景音乐

作者: 戒烟少年 | 来源:发表于2019-06-17 11:51 被阅读0次
//微信自动播放
$(document).ready(function(){ autoPlayMusic(); audioAutoPlay(); }); function audioAutoPlay() { var audio = document.getElementById('bg-music'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } 
            // 音乐播放 
            function autoPlayMusic() { 
            // 自动播放音乐效果,解决浏览器或者APP自动播放问题 
            function musicInBrowserHandler() { musicPlay(true); document.body.removeEventListener('touchstart', musicInBrowserHandler); } document.body.addEventListener('touchstart', musicInBrowserHandler); 
            // 自动播放音乐效果,解决微信自动播放问题 
            function musicInWeixinHandler() { musicPlay(true); document.addEventListener("WeixinJSBridgeReady", function () { musicPlay(true); }, false); document.removeEventListener('DOMContentLoaded', musicInWeixinHandler); } document.addEventListener('DOMContentLoaded', musicInWeixinHandler); } function musicPlay(isPlay) { var media = document.querySelector('#bg-music'); if (isPlay && media.paused) { media.play(); } if (!isPlay && !media.paused) { media.pause(); } }
    
            var audio = document.createElement('audio');//生成一个audio元素
            //audio.controls = true;这样控件才能显示出来
            audio.setAttribute('id','bg-music');
            audio.src = '音乐路径';//音乐路径
            document.body.appendChild(audio);//把它添加到页面中
            var bgAudio = new Audio();
            bgAudio.setAttribute("src","音乐路径");
            bgAudio.loop = false;// 音乐开始播放
            bgAudio.play()
            // $(".btn").on("click",function(){
            //     // 音乐停止播放
            //     bgAudio.pause();
            //     // 音乐从头开始播放
            //     bgAudio.currentTime = 0;
            // })
            setTimeout(function(){
                // 音乐停止播放
                    audio.src = '第二段音乐路径'
                // 音乐从头开始播放
                audio.currentTime = 0;
                audio.play()
            },5000)
                //判断音乐播放结束
            audio.addEventListener('ended',function(){
                console.log("33");
            },false);

相关文章

网友评论

      本文标题:h5移动端更换背景音乐

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