Cara melaksanakan main balik audio automatik dalam penyemak imbas Chrome

Question

Automain audio berfungsi dalam Mozilla, Microsoft Edge dan versi lama Google Chrome, tetapi tidak boleh automain dalam Google Chrome 67+ disebabkan perubahan dalam dasar automain.

Mereka telah menyekat automain (sehingga syarat sesi tertentu yang dinyatakan dalam catatan blog yang dipautkan dipenuhi). Bagaimana untuk melaksanakan automain audio dalam Google Chrome 67+?

Answer 1

Penyelesaian #1

Penyelesaian saya ialah mencipta iframe

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>

dan audio teg untuk penyemak imbas bukan Chrome

<audio autoplay loop  id="playAudio">
    <source src="audio/source.mp3">
</audio>

dan dalam script

saya

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  if (!isChrome){
      $('#iframeAudio').remove()
  }
  else {
      $('#playAudio').remove() // 为了确保背景中不会有两个音频
  }

Penyelesaian #2:

Menurut @Leonard, ada penyelesaian lain

Buat satu iframe yang tidak memainkan apa-apa, hanya untuk mencetuskan automain pada muat pertama.

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>

Sumber fail mp3 yang bagus: silence.mp3

Kemudian mainkan fail audio sebenar anda dengan mudah.

<audio id="player" autoplay loop>
    <source src="audio/source.mp3" type="audio/mp3">
</audio>

Secara peribadi lebih suka Penyelesaian #2 kerana ia adalah pendekatan yang lebih bersih dan kurang bergantung pada JavaScript.

Dikemas kini pada Ogos 2019

Penyelesaian #3

Sebagai pilihan lain kita boleh gunakan <embed>

Untuk Firefox Nampaknya automain audio berfungsi jadi kami tidak memerlukan elemen <embed> kerana ia akan mencipta dua audio berjalan pada masa yang sama.

// index.js
let audioPlaying = true,
    backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
    $('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
    backgroundAudio = setInterval(function() {
        $("#background-audio").remove();
        $('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
    }, 120000); // 120000是你的音频持续时间，本例中为2分钟。
}

Jika audio anda mempunyai acara togol, pastikan anda memadamkan elemen <embed> yang anda buat.

NOTA: Selepas bertukar, ia akan bermula dari awal, dan memandangkan <embed>已经被删除，<audio> telah dialih keluar, elemen <audio> kini akan dimainkan secara normal.

$(".toggle-audio").on('click', function(event) {
    audioPlaying = !audioPlaying;
    $("#background-audio").remove();

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // 播放音频
    }
    else {
        $(".audio1").pause();
    }

Sekarang pastikan anda menyembunyikan <audio> dan <audio>和<embed>elemen

ini

audio, embed {
    position: absolute;
    z-index: -9999;
}

Nota: diplay: none dan visibility: hidden akan menjadikan elemen diplay: none和visibility: hidden会使<embed> tidak berfungsi.