Mozilla, Microsoft edge ve eski google chrome'da da çalışan ancak yeni google chrome'da çalışmayan otomatik ses oynatma. otomatik oynatmayı engellediler. google chrome'da sesli otomatik oynatma yapmanın bir yolu var mı?

1.Çözüm

Buradaki çözümüm bir iframe

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

ve audioChrome olmayan tarayıcılar için de etiketleyin

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

ve benim 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 
  }

2.Çözüm:

@Leonard'a göre bunun için başka bir çözüm daha var

Bir Oluştur iframeilk yükte autoplay tetiklemek için sadece bir şey oynamak gelmez.

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

mp3 dosyası silence.mp3 için iyi bir kaynak

Ardından gerçek ses dosyanızı rahatça çalın.

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

Şahsen ben 2. çözümü tercih ediyorum çünkü JavaScript'e çok fazla güvenmemek için daha temiz bir yaklaşım.

Ağustos 2019 Güncellemesi

3. Çözüm

Alternatif olarak kullanabiliriz <embed>

For Firefox Biz gerekmez ses otomatik olarak oynatan çalıştığını görünüyor <embed>bu çifte ses çalışan yaratacaktır çünkü elemanı.

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

Ayrıca sesiniz için bir geçiş etkinliğiniz varsa, ses için oluşturulan <embed>öğeyi kaldırdığınızdan emin olun .

Not: Geçişinizden sonra <embed>, zaten silinmiş olduğundan baştan başlayacaktır ve <audio>öğe artık normal şekilde oynatılacaktır.

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

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

Şimdi bunları <audio>ve <embed>öğeleri gizlediğinizden emin olun

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

Not: diplay: noneve visibility: hiddenyapacak <embed>eleman yaramayacak.

Kromda ses etiketinin otomatik oynatma işlevini kullanmak için gerçekten güzel bir numara var.

Ekle

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

oysa silence.mp3sadece 0,5 saniyelik sessizlik.

Bu

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

daha sonra çalışır.

Chrome, bir sesin çalındığını fark eder ve ses etiketlerinde otomatik çalma izni verir.

Nisan 2018 itibarıyla Chrome'un otomatik oynatma politikaları değişti:

"Chrome'un otomatik oynatma politikaları basittir:

• Sessiz otomatik oynatmaya her zaman izin verilir.

Sesli otomatik oynatmaya şu durumlarda izin verilir:

• Kullanıcı alanla etkileşim kurdu (tıklama, dokunma vb.).
• Masaüstünde, kullanıcının Media Engagement Index eşiği aşıldı, bu da kullanıcının daha önce sesli video oynattığı anlamına geliyor.
• Kullanıcı, mobil cihazda siteyi ana ekranına eklemiştir.

Ayrıca

• Üst çerçeveler, sesli otomatik oynatmaya izin vermek için iç çerçevelerine otomatik oynatma izni atayabilir. "

Chrome'un geliştirici sitesinde, burada bulabileceğiniz bazı programlama örnekleri de dahil olmak üzere daha fazla bilgi vardır: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Bu küçük komut dosyasını https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio'da gösterildiği gibi eklemeniz yeterli

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

Bundan sonra istediğiniz gibi çalışacak:

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

En azından bunu kullanabilirsin:

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

Müzik, kullanıcı sayfanın herhangi bir yerine tıkladığında başlar.

Aynı zamanda EventListener'ı da anında kaldırır, böylece ses kontrollerini kullanırsanız, kullanıcı sesi kapatabilir veya duraklatabilir ve başka bir yere tıkladığında müzik tekrar başlamaz.

Can sıkıcı Reklamlar nedeniyle tarayıcılar, gizliliklerini video veya sesi otomatik oynatacak şekilde değiştirdi. Yani aşağıdaki kodla hile yapabilirsiniz.

Herhangi bir sessiz sesi iframe'e koyabilirsiniz.

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

Yalnızca kaynağı .mp3 olan görünmez bir iframe ekleyin ve ses öğesinden önce allow = "autoplay" yazın. Sonuç olarak, tarayıcı sonraki herhangi bir ses dosyasını başlatması için kandırılır. Veya sesi kapatılmamış bir videoyu otomatik oynatın.

Aşağıdaki gibi (.autoplay = true;) kullanabilirsiniz (Chrome Masaüstü'nde test edilmiştir):

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

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

Durdur / oynat düğmeleri eklemeniz gerekiyorsa:

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

Durdurma / oynatmanın tek bir düğme olmasını istiyorsanız:

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

Aynı düğme üzerinde durdurma / oynatmayı görüntülemek istiyorsanız:

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

Bazı tarayıcılarda ses düzgün çalışmayabilir, bu yüzden kodunuzdan önce iframe eklemeyi deneyin:

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

Bugün bunu beceriyordum ve tartışmaya keşfettiğim küçük bir merakı eklemek istedim.

Her neyse, bundan kurtuldum:

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

Bu:

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

Ve son olarak bu, kendi işinizi yaratmayı tercih ederseniz, biraz sınırların dışında olan bir "çözüm" (ki biz yapıyoruz):

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

Yaptığım keşif ve aynı zamanda gerçekten komik (tuhaf, tuhaf? Gülünç?) Kısmı, ilk ikisi söz konusu olduğunda, sistemi f5'e düzgün bir vuruş yaparak gerçekten yenebilirsiniz; Yenilemeye tekrar tekrar çok hızlı bir şekilde basarsanız (bazı 5-10 kez hile yapması gerekir), ses otomatik olarak çalınır ve ardından bir tek yenilemeden sonra yalnızca kötü yollarına dönmek için birkaç kez çalınır. Fantastik!

Google'dan yapılan duyuruda, medya dosyalarının "otomatik" oynatılabilmesi için kullanıcı ile site arasında bir etkileşim olması gerektiği yazıyor. Bu yüzden şimdiye kadar bulmayı başardığım en iyi "çözüm", dosyaların oynatılmasını otomatikten daha az, ancak çok daha kararlı / güvenilir hale getiren bir düğme eklemektir.

Chrome ve firefox'ta otomatik oynatmayı sağlamak için pixi.js ve pixi-sound.js'yi kullandım.

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

aynı zamanda mobil cihazlarda da çalışır ancak kullanıcının sesi tetiklemek için ekranda bir yere dokunması gerekir.

iframeBunun yerine kullanın :

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

geçici düzeltme

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

Veya oynatmayı tetiklemek için özel bir oynatıcı kullanın http://zohararad.github.io/audio5js/

Not: Otomatik oynatma 31 Aralık'ta devre dışı bırakılacak

Sesi etiketlemek için de kontrol özniteliği ekliyorum ve bunu CSS'de gizliyorum. Ve hepsi Chrome'da iyi çalışıyor.

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

Google, geçtiğimiz ay Chrome'da otomatik oynatma ile ilgili politikalarını değiştirdi. Lütfen bu duyuruya bakın .

Ancak, bir video yerleştiriyorsanız ve video sessizse otomatik oynatmaya izin verirler. mutedÖzelliği ekleyebilir ve videonun oynatılmaya başlamasına izin vermelidir.

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

İframe veya javascript kullanmadan çözüm:

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

Bu çözümle, Internet Explorer'ın aç / kaydet iletişim kutusu da önlenir.

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

Video etiketi de ses çalabilir. Ses etiketi olması gerektiği gibi davranmadığına göre, ses için video etiketini kullanabilirsiniz:

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

<iframe src="link/to/file.mp3" allow="autoplay">Kaynak bir otomatik oynatma iznine sahipse kullanabilirsiniz . Daha fazla bilgi burada .

Varsayılan HTML5 audiootomatik oynatma özelliği Chrome'da çalışmıyor, ancak JavaScript kullanarak otomatik ses oynatmayı zorlayabilirsiniz. Bunu dene:

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

Bu benim için çalışıyor.