audio autoplay bekerja di Mozilla, Microsoft edge dan google chrome lama juga tetapi tidak di google chrome baru. mereka telah memblokir putar otomatis. apakah ada cara untuk membuatnya diputar otomatis audio di google chrome?

Solusi # 1

Solusi saya di sini adalah membuat file iframe

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

dan audiojuga tag untuk browser non-chrome

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

dan di saya script

  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  if (!isChrome){
      $('#iframeAudio').remove()
  }
  else {
      $('#playAudio').remove() // just to make sure that it will not have 2x audio in the background 
  }

Solusi # 2:

Ada juga solusi lain untuk ini menurut @Leonard

Buat iframeyang tidak memutar apa pun hanya untuk memicu putar otomatis di pemuatan pertama.

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

sumber yang bagus untuk file mp3 silent.mp3

Kemudian putar file audio asli Anda dengan mudah.

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

Secara pribadi saya lebih suka solusi # 2 karena ini adalah pendekatan yang lebih bersih karena tidak terlalu mengandalkan JavaScript.

Perbarui Agustus 2019

Solusi # 3

Sebagai alternatif yang bisa kita gunakan <embed>

Untuk Firefox Tampaknya pemutaran otomatis audio berfungsi jadi kami tidak memerlukan <embed>elemen karena ini akan membuat audio ganda berjalan.

// 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 is the duration of your audio which in this case 2 mins.
}

Juga jika Anda memiliki acara toggle untuk audio Anda, pastikan untuk menghapus <embed>elemen yang dibuat untuk audio.

Catatan: Setelah Anda beralih, ini akan dimulai ulang dari awal karena <embed>sudah dihapus dan <audio>elemen akan diputar seperti biasa sekarang.

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

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // play audio 
    }
    else {
        $(".audio1").pause();
    }

Dan sekarang pastikan untuk menyembunyikan ini <audio>dan <embed>elemennya

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

Catatan: diplay: nonedan visibility: hiddenakan membuat <embed>elemen tidak berfungsi.

Ada trik yang sangat bagus untuk menggunakan fungsi putar otomatis dari tag audio di chrome.

Menambahkan

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

sedangkan silence.mp3keheningan hanya 0,5 detik.

Ini

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

bekerja setelah itu.

Chrome memperhatikan bahwa suara telah diputar dan memberikan izin untuk putar otomatis di tag audio.

Mulai April 2018, kebijakan putar otomatis Chrome berubah:

"Kebijakan putar otomatis Chrome itu sederhana:

• Putar otomatis tanpa suara selalu diizinkan.

Putar otomatis dengan suara diperbolehkan jika:

• Pengguna telah berinteraksi dengan domain (klik, ketuk, dll.).
• Di desktop, ambang Indeks Keterlibatan Media pengguna telah disilangkan, artinya pengguna sebelumnya telah memutar video dengan suara.
• Di seluler, pengguna telah menambahkan situs ke layar beranda mereka.

Juga

• Bingkai teratas dapat mendelegasikan izin putar otomatis ke iframe mereka untuk memungkinkan pemutaran otomatis dengan suara. "

Situs pengembang Chrome memiliki lebih banyak informasi, termasuk beberapa contoh pemrograman, yang dapat ditemukan di sini: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Cukup tambahkan skrip kecil ini seperti yang digambarkan di https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

Maka ini akan bekerja sesuai keinginan Anda:

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

Setidaknya Anda bisa menggunakan ini:

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

Musik dimulai saat pengguna mengklik di mana saja di halaman.

Ini juga menghapus EventListener secara instan, jadi jika Anda menggunakan kontrol audio, pengguna dapat membungkam atau menjedanya dan musik tidak dimulai lagi ketika dia mengklik di tempat lain ..

Browser telah mengubah privasi mereka untuk memutar video atau audio secara otomatis karena Iklan yang mengganggu. Jadi Anda bisa melakukan trik dengan kode di bawah ini.

Anda dapat meletakkan audio senyap apa pun di iframe.

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

Cukup tambahkan iframe tak terlihat dengan .mp3 sebagai sumbernya dan allow = "autoplay" sebelum elemen audio. Akibatnya, browser tertipu untuk memulai file audio berikutnya. Atau putar otomatis video yang tidak dibisukan.

Anda dapat menggunakan (.autoplay = true;) sebagai berikut (diuji di Chrome Desktop):

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

Jika Anda perlu menambahkan tombol stop / play:

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

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

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

Jika Anda ingin stop / play menjadi satu tombol:

<button onclick="PlayStop()" type="button">button</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Jika Anda ingin menampilkan stop / play pada tombol yang sama:

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>

Di beberapa browser, audio mungkin tidak berfungsi dengan benar, jadi sebagai trik coba tambahkan iframe sebelum kode Anda:

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

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function button() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Saya telah menggedor hari ini, dan saya hanya ingin menambahkan sedikit keingintahuan yang saya temukan ke dalam diskusi.

Bagaimanapun, saya telah membatalkan ini:

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

Ini:

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

Dan terakhir ini, "solusi" yang agak di luar batas jika Anda lebih suka membuat hal Anda sendiri (yang kami lakukan):

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

Penemuan yang telah saya buat dan juga bagian yang benar-benar lucu (aneh? Aneh? Konyol?) Adalah bahwa dalam kasus dua yang pertama, Anda sebenarnya dapat mengalahkan sistem dengan memberikan f5 pukulan yang tepat; jika Anda menekan refresh berulang-ulang dengan sangat cepat (sekitar 5-10 kali seharusnya melakukan trik), audio akan diputar otomatis dan kemudian akan diputar beberapa kali setelah sigle refresh hanya untuk kembali ke cara jahatnya. Fantastis!

Dalam pengumuman dari Google disebutkan bahwa agar file media diputar "secara otomatis", interaksi antara pengguna dan situs harus terjadi. Jadi, "solusi" terbaik yang sejauh ini berhasil saya temukan adalah menambahkan tombol, membuat pemutaran file kurang dari otomatis, tetapi jauh lebih stabil / dapat diandalkan.

Saya menggunakan pixi.js dan pixi-sound.js untuk mencapai pemutaran otomatis di chrome dan firefox.

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML:

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

ini juga berfungsi pada perangkat seluler tetapi pengguna harus menyentuh di suatu tempat di layar untuk memicu suara.

Gunakan iframesebagai gantinya:

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>

perbaikan suhu

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

Atau gunakan pemutar ubahsuaian untuk memicu permainan http://zohararad.github.io/audio5js/

Catatan: Autoplay akan diubah pada 31 Desember

Saya menambahkan atribut kontrol juga menandai audio, dan hanya menyembunyikannya di CSS. Dan semuanya berfungsi dengan baik di Chrome.

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

Google mengubah kebijakan mereka bulan lalu terkait putar otomatis di dalam Chrome. Silakan lihat pengumuman ini .

Namun, mereka mengizinkan pemutaran otomatis jika Anda menyematkan video dan video itu dibisukan. Anda dapat menambahkan mutedproperti dan itu akan memungkinkan video untuk mulai diputar.

<video autoplay controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Solusi tanpa menggunakan iframe, atau javascript:

<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>

Dengan solusi ini, dialog buka / simpan Internet Explorer juga dihindari.

   <embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>

Tag video juga dapat memutar audio. Mengingat tag audio tampaknya tidak berfungsi sebagaimana mestinya, Anda dapat menggunakan tag video untuk audio:

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>

Anda dapat menggunakan <iframe src="link/to/file.mp3" allow="autoplay">, jika sumber memiliki izin putar otomatis. Info selengkapnya di sini .

audioAtribut putar otomatis HTML5 default tidak berfungsi di chrome, tetapi Anda dapat memaksa putar otomatis audio menggunakan JavaScript. Coba ini:

document.getElementById('myAudio').play();

Ini berhasil untuk saya.