аудіозапуск аудіо працює в Mozilla, Microsoft edge і старому google chrome, але не в новому google chrome. вони заблокували автовідтворення. чи є спосіб зробити аудіовідтворення аудіо в google chrome?

Рішення No1

Моє рішення тут - створити iframe

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

і audioпозначте також для нехромних браузерів

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

і в моєму 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 
  }

Рішення No2:

Існує також ще одне обхідне рішення для цього, за словами @Leonard

Створіть програму, iframeяка нічого не відтворює, лише щоб запустити автовідтворення при першому завантаженні.

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

хорошим джерелом для mp3-файлу silence.mp3

Тоді відтворюйте свій справжній аудіофайл з легкістю.

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

Особисто я віддаю перевагу рішенню №2, оскільки він є більш чистим підходом, оскільки не покладається на JavaScript.

Оновлення в серпні 2019 року

Рішення No3

Як альтернативу ми можемо використовувати <embed>

Для Firefox Здається, що автовідтворення аудіо працює, тому нам <embed>елемент не потрібен, оскільки він створить подвійний аудіозапуск.

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

Крім того, якщо у вас є подія перемикання аудіо, не забудьте видалити створений <embed>елемент для аудіо.

Примітка: Після перемикання він перезапуститься з самого початку, тому <embed>що <audio>елемент уже видалено, і елемент буде відтворюватися як зазвичай зараз.

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

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

А тепер не забудьте приховати ці елементи <audio>та <embed>елементи

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

Примітка: diplay: noneі visibility: hiddenзмусить <embed>елемент не працювати.

Існує дійсно акуратний фокус у використанні функції автоматичного відтворення звукового тегу в chrome.

Додати

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

тоді як silence.mp3лише 0,5 секунди мовчання.

Це

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

працює згодом.

Chrome помічає, що звук відтворювався, і дає дозвіл на автоматичне відтворення в аудіо тегах.

З квітня 2018 року правила автоматичного відтворення Chrome змінилися:

"Політика автоматичного відтворення Chrome проста:

• Завжди дозволяється приглушене автовідтворення.

Автоматичне відтворення зі звуком дозволено, якщо:

• Користувач взаємодіяв з доменом (клацніть, торкніться тощо).
• На робочому столі пороговий показник Media Engagement Index перевищений, тобто користувач раніше відтворював відео зі звуком.
• На мобільному пристрої користувач додав сайт на свій домашній екран.

Також

• Верхні кадри можуть делегувати дозвіл на автоматичне відтворення своїм фреймам, щоб дозволити автовідтворення зі звуком. "

На веб-сайті розробника Chrome є додаткова інформація, включаючи деякі приклади програмування, яку можна знайти тут: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Просто додайте цей невеликий сценарій, як зображено в https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

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

Тоді це буде працювати, як ви хочете:

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

Принаймні ви можете використовувати це:

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

Музика починається, коли користувач клацає в будь-якому місці сторінки.

Він також миттєво видаляє EventListener, тому, якщо ви використовуєте елементи керування звуком, користувач може його вимкнути або призупинити, і музика не запускається знову, коли він клацне десь ще ...

Браузери змінили конфіденційність на автоматичне відтворення відео чи аудіо через рекламу, яка дратує. Тож ви можете просто обдурити код нижче.

Ви можете вставити будь-який тихий звук у фрейм.

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

Просто додайте невидимий iframe із .mp3 як джерело та дозвольте = "autoplay" перед елементом аудіо. В результаті браузер обманюється запускати будь-який наступний аудіофайл. Або автоматично відтворити відео, яке не вимкнено.

Ви можете просто використовувати (.autoplay = true;) наступним чином (перевірено на Chrome Desktop):

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

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

Якщо вам потрібно додати кнопки зупинки / відтворення:

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

Якщо ви хочете, щоб зупинка / відтворення були однією кнопкою:

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

Якщо ви хочете відобразити зупинку / відтворення на тій самій кнопці:

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

У деяких браузерах звук може працювати некоректно, тому для хитрості спробуйте додати iframe перед кодом:

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

Сьогодні я відвертався від цього, і я просто хотів додати до дискусії трохи цікавості, яку я виявив.

У всякому разі, я пішов з цього:

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

Це:

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

І нарешті, це "рішення", яке дещо виходить за межі, якщо ви хочете просто створити власну річ (що ми і робимо):

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

Відкриття, яке я зробив, а також справді смішна (дивна? Дивна? Смішна?) Частина полягає в тому, що у випадку з колишніми двома, ви насправді можете перемогти систему, давши f5 належний стукіт; якщо ви повторно натиснете "оновити" дуже швидко (приблизно 5-10 разів це повинно зробити трюк), аудіо відтвориться автоматично, а потім відтвориться кілька разів після оновлення сигналу, лише щоб повернутися до злих шляхів. Фантастично!

В оголошенні від Google йдеться, що для того, щоб мультимедійні файли відтворювались «автоматично», повинна відбутися взаємодія між користувачем та сайтом. Тож найкраще «рішення», яке мені вдалося придумати дотепер, - це додати кнопку, що робить відтворення файлів менш автоматичним, але набагато стабільнішим / надійнішим.

я використовував pixi.js та pixi-sound.js для автоматичного відтворення у chrome та 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>

він також працює на мобільних пристроях, але користувач повинен торкнутися десь на екрані, щоб викликати звук.

iframeЗамість цього використовуйте :

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

тимчасове виправлення

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

Або скористайтеся користувацьким програвачем для запуску гри http://zohararad.github.io/audio5js/

Примітка. Автовідтворення буде відновлено 31 грудня

Я додаю атрибут control занадто тег аудіо і просто приховую його в CSS. І все чудово працює в Chrome.

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

Минулого місяця Google змінив свою політику щодо автоматичного відтворення в Chrome. Перегляньте це оголошення .

Однак вони дозволяють автоматичне відтворення, якщо ви вставляєте відео, і воно вимкнено. Ви можете додати mutedвластивість, і це повинно дозволити відтворення відео.

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

Рішення без використання iframe або 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>

За допомогою цього рішення також уникається діалогове вікно відкриття / збереження Internet Explorer.

   <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 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">, якщо джерело має дозвіл на автоматичне відтворення. Більше інформації тут .

Атрибут audioавтоматичного відтворення HTML5 за замовчуванням не працює в chrome, але ви можете примусити аудіовідтворення аудіо за допомогою JavaScript. Спробуйте це:

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

Це працює для мене.