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

Question

我正在使用此代码,当我看到controls我看到自动播放不起作用.

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

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

谢谢,并得到很好的赞赏

Answer 1

您可以使用AudioContextAPI 播放声音并从任何声源ArrayBuffer(即:来自a XMLHttpRequest或a 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();
    });

实例

适用于Chrome和Firefox,包括移动设备和桌面设备

重要笔记

值得一提的是,IMO,这个"技巧"实际上可以被视为浏览器错误,如果浏览器认为这打破了用户体验/成为广泛使用的烦恼(如广告),则可能随时无法使用.

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

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

因此,autoplay无论你如何操作,强制音频都是一个糟糕的用户体验.

Answer 2

无法在移动浏览器中使用自动播放功能.(这是不允许的)

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

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

在移动旅行中自动播放音频

iOS特定注意事项| 循环属性