Cara melaksanakan main balik audio automatik dalam penyemak imbas Chrome
P粉617597173
P粉617597173 2023-08-20 17:12:40
0
1
1324
<p>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. </p> <p>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+? </p>
P粉617597173
P粉617597173

membalas semua(1)
P粉738346380

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: nonevisibility: hidden会使<embed> tidak berfungsi.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan