H5音乐如何在移动端上 自动播放,还能自动循环播放

爱许乐
  • 179

audio1 音乐要一直循环,
audio2 只有在点击按钮时才会播放

loop="loop" 这个方法在手机上实现不了 我的那些JavaScript 也不起作用
百度了一天,也没能解决

 
    <audio class="music" src="audio/H5_home.mp3" id="audio1"  preload loop="loop"></audio>
    <audio class="music" src="audio/H5_gold.mp3" id="audio2"></audio>
    
    以下是JavaScript 代码
    
        function audioAutoPlay(id){
            var audio1 = document.getElementById(id);
            audio1.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                    audio1.play();
            }, false);
        }
        audioAutoPlay('audio1');
        
        
//        var audio1 = document.getElementById("audio1");
//            audio1.play();
//     
//            document.addEventListener("WeixinJSBridgeReady", loopAudio,function(){
//
//                audio1.play();
//            });

  
        var audio2 = document.getElementById("audio2");
            audio2.play();
            document.addEventListener("WeixinJSBridgeReady",function(){
                audio2.play();
            });
            audio2.pause();
            document.addEventListener("WeixinJSBridgeReady",function(){
                audio2.pause();
            });
回复
阅读 7.4k
4 个回答
        // 计时器  音乐 是25秒,怕有延迟 设置了30秒循环,这样就可以解决音乐在手机不循环的问题
        setInterval(function(){
            audio1.play();
        },30000);
        //进入页面的音乐
        var audio1 = document.getElementById("audio1");
            audio1.play();
            audio1.loop;
            document.addEventListener("WeixinJSBridgeReady", function(){
    
                audio1.play();
                audio1.loop;
            });
    

1.你这是要在微信里自动播放吗?自动播放要加上autoplay="autoplay"
2.要看你js代码的位置,你如果放在head里是没法生效的
3.微信的ready现在不知道还是不是这样判断的,你可以在ready事件里加一些代码看看ready事件有没有触发

clipboard.png

移动端禁止自动播放,必须由用户触发。
所以你只能刚进页面的时候通过一些事件来触发。
我用的是下面这个。

             if(window.WeixinJSBridge){
                        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                            music.play();
                        }, false);
                    }else{
                        document.addEventListener("WeixinJSBridgeReady", function() {
                        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                            music.play();
                        });
                    }, false);
                }
宣传栏