Javascript 在移动浏览器上播放随机音频曲目

Javascript 在移动浏览器上播放随机音频曲目,javascript,html,audio,mobile,Javascript,Html,Audio,Mobile,目标: 用户点击一个按钮 随机选择一个音频曲目(在3个曲目中)并在后台播放 问题:该曲目在桌面Chrome和Firefox上播放,但在移动Chrome上不播放 JS: 函数播放(){ var a=数学.random()*3; a=数学楼层(a); 如果(a==0){ document.getElementById(“soundtrack”).innerHTML=“您的浏览器不支持音频元素。”; } 如果(a==1){ document.getElementById(“soundtrack”).i

目标:

用户点击一个按钮

随机选择一个音频曲目(在3个曲目中)并在后台播放

问题:该曲目在桌面Chrome和Firefox上播放,但在移动Chrome上不播放

JS:

函数播放(){
var a=数学.random()*3;
a=数学楼层(a);
如果(a==0){
document.getElementById(“soundtrack”).innerHTML=“您的浏览器不支持音频元素。”;
}
如果(a==1){
document.getElementById(“soundtrack”).innerHTML=“您的浏览器不支持音频元素。”;
}
如果(a==2){
document.getElementById(“soundtrack”).innerHTML=“您的浏览器不支持音频元素。”;
}
}
HTML:



如何在移动浏览器上发挥这一作用?这是事件驱动(点击按钮),而不是自动播放。它应该播放,但不播放。

实际上它似乎是自动播放,因为您不是在事件(点击)时播放文件,您只是加载新的HTML代码,然后请求自动播放

如果在替换HTML后立即请求javascript中的播放操作,则可能会起作用:
document.getElementById('background_audio1').play()

我明白了。我删除了自动播放。在函数中添加了getelement play-它现在可以工作了。
    function play() {
        var a = Math.random() * 3;
        a = Math.floor(a);

        if (a == 0) {
            document.getElementById('soundtrack').innerHTML = "<audio id='background_audio1' loop autoplay><source src='0.mp3' type='audio/ogg'>Your browser does not support the audio element.</audio>";
        }
        if (a == 1) {
            document.getElementById('soundtrack').innerHTML = "<audio id='background_audio1' loop autoplay><source src='1.mp3' type='audio/ogg'>Your browser does not support the audio element.</audio>";
        }
        if (a == 2) {
            document.getElementById('soundtrack').innerHTML = "<audio id='background_audio1' loop autoplay><source src='2.mp3' type='audio/ogg'>Your browser does not support the audio element.</audio>";
        }
    }
    <a class="button" onclick="play()"><img src="image.png"/></a>

    <div id="soundtrack"></div>