web-dev-qa-db-ja.com

オーディオタグの自動再生がモバイルで機能しない

このコードを使用していますが、controlsが表示されると、自動再生が機能していません。

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

モバイルデバイスでは機能せず、Webサイトでは非常にうまく機能します。誰でもこれで問題を教えてもらえますか？.

感謝し、感謝します

htmlhtml5audio
15
Lakshya

モバイルブラウザで自動再生を機能させる方法はありません。 （これは許可されていません）

しかし、いくつかのトリックはこれを行います。

いくつかのトリックを表示するには、以下のリンクをクリックしてください

モバイルサファリでのオーディオの自動再生

iOS固有の考慮事項|ループ属性

8
Ender Kaya

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();
    });

実例

ChromeおよびFirefoxとモバイルとデスクトップの両方で動作します

重要な注意事項

IMO、この「トリック」は実際にはブラウザのバグと見なされる可能性があり、ブラウザがこれがユーザーエクスペリエンスを損なう/広く使用されている不快感（広告など）になったと判断した場合、いつでも機能しなくなる可能性があります。

少なくとも私のモバイルとFF 54では、たとえモバイルがミュートされていても、サウンドが再生されることに注意してください。

また、ブラウザの通常のオプションまたはより高度なabout:configページ（autoplayの動作はFirefoxのmedia.autoplay.enabledおよびmedia.block-autoplay-until-in-foregroundの設定によって設定されます）を介して、ユーザーが希望とニーズに合わせてautoplay動作を設定する可能性があることにも言及する価値があります。

音声を強制するautoplayは、UXの悪い考えですどんな方法でも。

10
Xenos