автовоспроизведение звука также работает в Mozilla, Microsoft Edge и старом Google Chrome, но не в новом Google Chrome. они заблокировали автовоспроизведение. есть ли способ сделать его автовоспроизведением звука в Google Chrome?

Решение # 1

Мое решение здесь - создать iframe

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

и audioпометьте также для браузеров без Chrome

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

Решение №2:

По словам @Leonard, есть еще один способ обхода этого.

Создайте файл, iframeкоторый ничего не воспроизводит, только для запуска автовоспроизведения при первой загрузке.

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

хороший исходник для мп3 файла тишина.mp3

Затем с легкостью воспроизведите свой настоящий аудиофайл.

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

Лично я предпочитаю решение №2, потому что это более чистый подход, позволяющий не полагаться на JavaScript.

Обновление за август 2019 г.

Решение # 3

В качестве альтернативы мы можем использовать <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 проста:

• Приглушенное автовоспроизведение всегда разрешено.

Автовоспроизведение со звуком разрешено, если:

• Пользователь взаимодействовал с доменом (щелкнул, коснулся и т. Д.).
• На настольном компьютере пороговое значение индекса взаимодействия с медиа пользователя было превышено, что означает, что пользователь ранее воспроизводил видео со звуком.
• На мобильном устройстве пользователь добавил сайт на свой домашний экран.

Также

• Верхние фреймы могут делегировать разрешение на автовоспроизведение своим фреймам, чтобы разрешить автовоспроизведение со звуком. "

На сайте разработчика 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 можно поместить любой беззвучный звук.

<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 в качестве источника и allow = "autoplay" перед элементом audio. В результате браузер обманом запускает любой последующий аудиофайл. Или автовоспроизведение видео без звука.

Вы можете просто использовать (.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 декабря.

Я добавляю атрибут управления к тегу audio и просто скрываю его в CSS. И все отлично работает в Хроме.

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

Тег видео также может воспроизводить звук. Учитывая, что тег audio не работает должным образом, вы можете просто использовать тег video для звука:

<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();

У меня это работает.