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