目标:
用户点击一个按钮。
选择随机音轨(在3首曲目中)并在后台播放。
问题:该曲目在桌面Chrome和Firefox上播放,但无法在移动Chrome上播放。
JS:
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>";
}
}
HTML:
<a class="button" onclick="play()"><img src="image.png"/></a>
<div id="soundtrack"></div>
如何在移动浏览器上播放此内容?这是事件驱动(点击按钮)而不是自动播放。它应该播放但不播放。
答案 0 :(得分:1)
实际上它似乎是自动播放,因为你没有在事件(点击)上播放文件,你只是加载新的HTML代码然后请求自动播放。
如果您在替换HTML后立即在javascript中请求播放操作,则可能会有效:
document.getElementById('background_audio1').play();