Cara membuat audio autoplay di chrome


94

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?


7
Fakta bahwa Google melakukan ini tidak masuk akal. Mereka benar-benar hanya mengatakan "tidak ada musik untuk game Anda kecuali pengguna mengklik Play Musik". Tidak bisa diterima. Sangat marah!
Hobbes

2
@Hobbes Setuju. Setidaknya harus ada pengecualian. Seperti yang saya sebutkan di poster lain, saya memiliki halaman "MUSIK", dengan link situs "mymusic.html", yang hanya bisa Anda buka dengan link / tombol yang diberi label dengan jelas MUSIK SAYA ". Sangat tidak masuk akal seseorang akan pergi ke sana dan menjadi terkejut atau kesal dengan contoh musik yang diputar di sana. Terutama dengan tombol STOP MUSIC yang jelas "posisi tetap". Kebijakan ini adalah kasus reaksi berlebihan terhadap praktik-praktik yang melanggar.
Randy

Jawaban:


104

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.


Bagaimana Anda membuat loop audio?
Kwarrtz

1
Solusi 2 berhasil untuk saya. Catatan samping: jika Anda bekerja untuk web dan Phonegap pada saat yang sama, Phonegap tidak memerlukan solusi ini dan sebenarnya cukup buruk. Jadi, jika Anda memiliki basis kode umum untuk web dan Phonegap, pastikan Anda menemukan cara untuk menerapkan solusi ini hanya di web.
Ignacio Segura

2
Tautan ke file kesunyian sudah mati, jadi saya menemukan beberapa file diam lainnya di GitHub: github.com/anars/blank-audio . Saya menggunakan 1-second-of-silence.mp3untuk proyek saya, tetapi file apa pun dalam koleksi ini akan berfungsi, saya kira.
Travis

13
Tampaknya rusak pada Chrome 76.
mightyiam

3
Ya, ini tidak berfungsi lagi (jika berhasil di masa lalu)
Yulian

28

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.


5
Oke, sementara ini berhasil, ini juga terasa seperti mengeksploitasi bug, atau setidaknya, perilaku yang tidak diinginkan. Saya membayangkan seseorang akan melaporkan ini ke Google jadi saya tidak akan mengandalkannya bekerja lama. Temuan bagus!
Neil Bryson

4
Agak keluar dari topik, tapi silent.mp3 Anda cukup besar di 36.7k. Coba ini (216 byte) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
Neil Bryson

3
silent.mp3 link sudah mati. Anda bisa membuatnya sendiri .
idbrii

1

1
Ya, mereka sedang melakukannya ... tidak berfungsi lagi baik di Firefox atau Chrome
Stefan Reich

15

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


3
Jadi Anda mengatakan tidak mungkin kita bisa memutar audio secara otomatis di browser chrome?
Akshay Rathod

Juga, ada opsi izin di Browser Chrome di Android sekarang pengguna dapat memilih untuk mengizinkan suara di putar otomatis
zeta

8

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>

Dapatkah Anda mengirimkan biola untuk implementasi ini? Ini akan sangat membantu
Vikash

5
Ini tidak lagi berfungsi? Dapatkan pesan ini: "AudioContext tidak diizinkan untuk dimulai. Ini harus dilanjutkan (atau dibuat) setelah isyarat pengguna di halaman. Developers.google.com/web/updates/2017/09/… "
thdoan

Bekerja di Chrome 81.0.4044.138 di mac 👍
Mosh Feu

5

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 ..


Ini saya yakin berada di jalur yang benar, dalam mematuhi kebijakan baru yang membutuhkan BEBERAPA interaksi pengguna untuk memutar musik. Saya telah menambahkan ini ke acara sentuh yang telah saya tambahkan untuk browser seluler, dan acara onscroll yang "terkadang berfungsi". Sayangnya, kebijakan "no play ()" tampaknya tidak mengizinkan gulir roda mouse dihitung sebagai interaksi pengguna, tapi saya sedang mengusahakannya juga. Masalahnya, halaman saya adalah halaman MUSIK, secara harfiah disebut "mymusic.html", yang bisa Anda ikuti dengan tombol MUSIC yang diberi label dengan baik. Jadi, jika pernah ada halaman untuk membenarkan 'putar' saat dimuat ', halaman itu harusnya!
Randy

@ Randy Saya berada dalam situasi yang sangat mirip, saya sedang mengerjakan halaman musik dan ingin menerapkan putar otomatis. Menambahkan atribut putar otomatis berfungsi sangat tidak konsisten - kode yang sama terkadang berfungsi, tetapi tidak selalu. Saya tidak memiliki konsol atau kesalahan jaringan. Apakah Anda menyelesaikan situasi Anda?
Lazarus Rising

@LazarusRising - Meskipun ini semua tampaknya dimulai dengan browser ponsel, saya memperhatikan versi browser desktop yang lebih baru juga menolak putar otomatis. Saya harus mengatakan, saya puas dengan kebutuhan untuk memiliki acara yang dipicu oleh interaksi pengguna untuk memulai musik. Bahkan saya, sebagai penulis halaman, mulai merasa kesal membuka halaman saya dan memulai musik hanya karena saya menyentuh layar. Saya mulai melihat logika mengapa putar otomatis dihentikan secara bertahap. Dan sejak ini mulai terjadi secara universal, saya tidak merasa situs saya adalah satu-satunya yang tidak dapat melakukannya.
Randy

Chrome melontarkan pelanggaran karena memaksa bermain.
Gabriel Petersson

2

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.


2

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>

Sepertinya tidak berfungsi di Chrome Versi 85.0.4183.83 (Build Resmi) (64-bit)
MC9000

1

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.


3
Mengandalkan interaksi pengguna bukanlah putar otomatis.
mightyiam

0

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.


0

Gunakan iframesebagai gantinya:

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

0

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


Ini bukan jawaban, karena ini bukan putar otomatis.
mightyiam

1
@mightyiam ini adalah solusi karena tidak ada cara untuk memutar otomatis karena Chrome memblokirnya
Youssef KH

0

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>

1
Mungkin jika MEI Anda untuk situs itu memungkinkan putar otomatis. Jika tidak, saya tidak melihat alasan mengapa ini akan berhasil.
mightyiam

0

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>

4
saya ingin audio diputar di latar belakang.
Akshay Rathod

13
Pemutaran otomatis audio tanpa suara tidak dapat dianggap sebagai jawaban.
mightyiam

@ Akshay Rathod apakah u menemukan solusi?
The Dead Man

0

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>


1
Nggak. Tidak berfungsi di Chrome Versi 85.0.4183.83 (Build Resmi) (64-bit)
MC9000

0

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>

-2

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


itu menunjukkan kontrol dan saya tidak ingin apa pun di halaman. hanya tombol play dan pause.
Akshay Rathod

dan bagaimana cara memutar audio?
Akshay Rathod

1
@AkshayRathod harap periksa Atribut loop <audio> HTML . Sedangkan, Dalam XHTML, minimisasi atribut dilarang, dan atribut loop harus didefinisikan sebagai <audio loop = "loop">.
hmd

-4

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.


3
bukan berarti putar otomatis "tidak berfungsi", melainkan tunduk pada kebijakan di mana putar otomatis tidak akan berfungsi jika persyaratan kebijakan tidak terpenuhi. Lihat developers.google.com/web/updates/2017/09/… . Kode ini tidak akan mengelak dari kebijakan itu. Jika berhasil untuk Anda, itu karena Anda memenuhi ambang batas dan / atau menyetel beberapa tanda pengembang. Tetapi seperti yang dikatakan halaman itu, Anda tidak dapat berasumsi bahwa ini akan berhasil untuk semua orang.
ADyson

Setidaknya di FF 66, ini juga tidak akan berhasil. Kebijakan baru adalah memblokir play () jika tidak dipicu oleh interaksi pengguna.
Randy
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.