Question

我正在使用此代码，当我看到controls时，我发现自动播放无效。

<audio autoplay="true" src="music/lathe_di_chadar.mp3" type="audio/mp3" loop></audio>

并且它不适用于移动设备，并且非常适合在网站上工作。谁能告诉我这个问题？。

谢谢，并且赞赏

Answer 1

您可以使用AudioContext API播放声音并从任何ArrayBuffer获取来源（即：来自XMLHttpRequest或File）

    window.addEventListener('load', function () {
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var source = audioCtx.createBufferSource();
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'audio-autoplay.wav');
        xhr.responseType = 'arraybuffer';
        xhr.addEventListener('load', function (r) {
            audioCtx.decodeAudioData(
                    xhr.response, 
                    function (buffer) {
                        source.buffer = buffer;
                        source.connect(audioCtx.destination);
                        source.loop = false;
                    });
            source.start(0);
        });
        xhr.send();
    });

Live example

适用于Chrome和Firefox手机和桌面

重要提示

值得一提的是，IMO，这个“技巧”实际上可以被视为浏览器错误，如果浏览器认为这会破坏用户体验/成为广泛使用的烦恼（如广告），则可能随时无法使用

值得一提的是，至少在我的手机和FF 54上，即使您的手机静音，声音仍会播放...

还值得一提的是，用户可以通过浏览器的常用选项或更高级的autoplay页面（about:config行为设置autoplay行为以满足他们的愿望和需求由Firefox的media.autoplay.enabled和media.block-autoplay-until-in-foreground首选项设置。

所以强制音频autoplay是一个糟糕的用户体验，无论你怎么做。

Answer 2

无法在移动浏览器中使用自动播放功能。（这是不允许的）

但有些技巧可以做到这一点。

点击下面的链接查看一些技巧

Autoplay audio on mobile safari

iOS-Specific Considerations | Loop Attribute

Answer 3

我在这个问题上有很多经验。它还适用于在用户有机会与页面进行交互之前加载的Javascript音频。

但是，一旦用户完全点击任何东西，它就开始运行。我个人建议在首页上显示整页的入口信息：“单击进入我的真棒网站！”如果用户完全进入页面，他们注定要听到您想向他们扔的任何声音！：D

音频标签自动播放不适用于移动设备

3 个答案: