在移动浏览器上播放随机音轨

Question

Objective:

用户点击了一个按钮。

随机选择一个音轨（在 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>

如何在移动浏览器上播放此内容？这是事件驱动的（点击按钮）而不是自动播放。它应该播放但没有播放。

Answer 1

实际上它似乎是自动播放的，因为您没有在事件（点击）时播放文件，您只是加载新的 HTML 代码，然后请求自动播放。

如果您在替换 HTML 后立即请求 javascript 中的播放操作，它可能会起作用： document.getElementById('background_audio1').play();

在移动浏览器上播放随机音轨

Playing Random Audio Tracks on mobile browsers

html

javascript

audio

mobile