一尘不染

音频标签自动播放在移动设备中不起作用

html

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

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

并且无法在移动设备上正常运行,在网站上也可以正常运行。谁能告诉我这个问题?

谢谢,感激不尽


阅读 279

收藏
2020-05-10

共1个答案

一尘不染

现在是2020年

请注意(出于以下原因?)Chrome已更改了其自动播放政策,因此您现在必须:

  • resume() 用户与页面进行任何(任何)交互后的音频上下文
  • 或“排名很高”(例如,相信Chrome浏览器默认不会根据用户和世界的行为停止播放音频)
  • 或(据我所知)用户必须位于来源A上,然后单击指向相同来源A的链接,并且A的新页面可以自动播放内容。

您可以使用AudioContextAPI播放声音,并从任何来源获取声音ArrayBuffer(即:从XMLHttpRequestFile

    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.enabledmedia.block-autoplay-until-in- foreground首选项设置)来设置行为以使其符合自己的愿望和需求。

因此 autoplay不管您如何操作, 强制音频 都是不好的UX创意

2020-05-10