Как сделать автозапуск аудио на Chrome

94

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

Акшай Ратод
источник
7
То, что Google сделал это, абсурдно. Они буквально просто сказали: «Ну, никакой музыки для вашей игры, если пользователь не нажимает Play Music». Неприемлемо. Так зол!
Hobbes
2
@Hobbes Согласен. По крайней мере, должны быть исключения. Как я уже упоминал другому автору, у меня есть страница «МУЗЫКА» со ссылкой на сайт «mymusic.html», на которую можно перейти только с помощью ссылки / кнопки, четко обозначенной «МОЯ МУЗЫКА». Довольно абсурдно, что кто-то зайдет туда и будет удивлен или раздражен тем, что там проигрывается образец музыки. Особенно с четкой "фиксированной позицией" кнопки STOP MUSIC. Эта политика является случаем чрезмерной реакции на оскорбительные действия.
Randy

Ответы:

104

Решение # 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>элемент неработающим.

аджби
источник
Как сделать звуковую петлю?
Kwarrtz
1
Решение 2 сработало для меня. Примечание: если вы одновременно работаете с Интернетом и Phonegap, Phonegap не нуждается в этом обходном пути, и на самом деле это очень плохо. Поэтому, если у вас есть общая кодовая база для Интернета и Phonegap, убедитесь, что вы нашли способ применить этот обходной путь только в Интернете.
Игнасио Сегура
2
Ссылка на файл тишины мертва, поэтому я нашел еще несколько файлов тишины на GitHub: github.com/anars/blank-audio . Я использую 1-second-of-silence.mp3для своего проекта, но, думаю, подойдет любой файл из этой коллекции.
Travis
13
Кажется,
заблокирован
3
Да, это больше не работает (если оно работало в прошлом)
Юлиан
28

Есть действительно хитрый трюк, чтобы использовать функцию автовоспроизведения аудиотэга в 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 замечает, что был воспроизведен звук, и дает разрешение на автовоспроизведение в аудио тегах.

Леонард Сторкс
источник
5
Хорошо, хотя это действительно работает, но также кажется, что он использует ошибку или, по крайней мере, непреднамеренное поведение. Я предполагаю, что кто-то сообщит об этом в Google, поэтому я не буду полагаться на это надолго. Хорошая находка!
Нил Брайсон
4
Немного не по теме, но ваш файл silent.mp3 довольно большой - 36,7k. Попробуйте это (216 байт) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
Нил Брайсон
3
Тишина.mp3 ссылка мертва. Вы можете создать свой собственный .
idbrii
1
@Toniq Конечно, всем извиняюсь - s3-eu-west-1.amazonaws.com/omegasquadron.neilbryson.net/…
Нил Брайсон
1
Да, они это знают ... больше не работает ни в Firefox, ни в Chrome
Стефан Райх
15

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

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

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

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

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

Также

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

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

Deltran
источник
3
Итак, вы говорите, что мы не можем автоматически воспроизводить звук в браузере Chrome?
Акшай Ратод
Кроме того , есть вариант разрешения в браузере Chrome в Android теперь пользователь может выбрать , чтобы звуки в автозапуск
дзета
8

Просто добавьте этот небольшой скрипт, как показано на странице 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>
Мануэль Алвес
источник
Вы можете прислать мне скрипку для этой реализации? Это будет действительно полезно
Викаш
5
Больше не работает? Получил сообщение: «The AudioContext не было позволено начать Должно быть возобновлено (или создать) после жест пользователя на странице.. Developers.google.com/web/updates/2017/09/... »
thdoan
Работает над Chrome 81.0.4044.138 на mac 👍
Mosh Feu
5

По крайней мере, вы можете использовать это:

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

Музыка начинается, когда пользователь щелкает в любом месте страницы.

Он также мгновенно удаляет EventListener, поэтому, если вы используете элементы управления звуком, пользователь может отключить или приостановить его, и музыка не запускается снова, когда он щелкает в другом месте.

Пол Беккер
источник
Я считаю, что это верный путь соблюдения новых политик, требующих НЕКОТОРЫХ действий пользователя для воспроизведения музыки. Я добавил это к событию касания, которое я уже добавил для мобильных браузеров, и к событию onscroll «иногда работает». К сожалению, политика «no play ()», похоже, не позволяет считать прокрутку колеса мыши как взаимодействие с пользователем, но я тоже над этим работаю. Дело в том, что моя страница - это МУЗЫКАЛЬНАЯ страница, буквально названная "mymusic.html", на которую вы можете переходить, следуя хорошо обозначенной кнопке МУЗЫКА. Так что, если когда-либо и существовала страница, оправдывающая «игру при загрузке», она действительно должна была быть!
Randy
@Randy У меня очень похожая ситуация, я работаю над музыкальной страницей и хочу реализовать автовоспроизведение. Добавление атрибута autoplay работало очень непоследовательно - один и тот же код работает иногда, но не всегда. У меня нет консольных или сетевых ошибок. Вы разрешили свою ситуацию?
Lazarus Rising
@LazarusRising - Хотя все это, казалось, началось с телефонных браузеров, я замечаю, что более новые версии настольных браузеров также отклоняют автовоспроизведение. Я должен сказать, что я удовлетворен необходимостью иметь событие, инициированное взаимодействием с пользователем, запускающее музыку. Фактически, даже я, как автор страницы, начинаю чувствовать раздражение, заходя на мою страницу и начинаю музыку только потому, что я коснулся экрана. Я начинаю понимать логику отказа от автовоспроизведения. И поскольку это начинает происходить повсеместно, я не чувствую, что мой сайт единственный, кто не может этого сделать.
Рэнди,
Хром устанавливает нарушение за принуждение к игре.
Габриэль Петерссон
2

Браузеры изменили свою конфиденциальность на автовоспроизведение видео или звука из-за раздражающей рекламы. Таким образом, вы можете просто обмануть код ниже.

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

Муртаза ДЖАФАРИ
источник
2

Вы можете просто использовать (.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>
Валид Альдхахи
источник
Кажется, не работает в Chrome версии 85.0.4183.83 (официальная сборка) (64-разрядная
версия
1

Сегодня я уже много думал об этом, и я просто хотел добавить в обсуждение небольшой интересный факт, который я обнаружил.

Во всяком случае, я ушел от этого:

<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 говорится, что для «автоматического» воспроизведения медиафайлов должно иметь место взаимодействие между пользователем и сайтом. Итак, лучшее «решение», которое мне удалось придумать до сих пор, - это добавить кнопку, которая делает воспроизведение файлов менее автоматическим, но намного более стабильным / надежным.

Путо Мике
источник
3
Если полагаться на взаимодействие с пользователем, это не является автовоспроизведением.
mightyiam 04
0

Я использовал 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>

он также работает на мобильных устройствах, но пользователь должен коснуться любого места на экране, чтобы включить звук.

Акшай Ратод
источник
0

iframeВместо этого используйте :

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
Джессе Мендонса
источник
0

временное исправление

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

Или используйте собственный проигрыватель для запуска воспроизведения http://zohararad.github.io/audio5js/

Примечание. Автовоспроизведение будет возобновлено 31 декабря.

Юсеф К.Х.
источник
Это не ответ, потому что это не автовоспроизведение.
mightyiam 04
1
@mightyiam, это обходной путь, потому что нет возможности автовоспроизведения, поскольку хром заблокировал его
Юсеф К.Х.
0

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

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>
Юрий Бойко
источник
1
Возможно, если ваш MEI для этого сайта разрешает автовоспроизведение. В противном случае я не вижу причин, по которым это сработает.
mightyiam 04
0

В прошлом месяце 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>
Это
источник
4
я хочу, чтобы звук воспроизводился в фоновом режиме.
Акшай Ратод
13
Автовоспроизведение с отключенным звуком не может считаться ответом.
mightyiam 04
@Akshay Rathod ты нашел решения?
Мертвец
0

Решение без использования 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>

Хуан
источник
1
Неа. Не работает в Chrome версии 85.0.4183.83 (официальная сборка) (64-разрядная
версия
0

Тег видео также может воспроизводить звук. Учитывая, что тег 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>
Кэмпбелл
источник
-2

Вы можете использовать <iframe src="link/to/file.mp3" allow="autoplay">, если у источника есть разрешение на автовоспроизведение. Больше информации здесь .

Мартин ван Хаут
источник
он показывает элементы управления, и мне ничего не нужно на странице. просто нажмите кнопку воспроизведения и паузы.
Акшай Ратод,
а как зациклить звук?
Акшай Ратод
1
@AkshayRathod, пожалуйста, проверьте атрибут цикла HTML <audio> . Принимая во внимание, что в XHTML минимизация атрибутов запрещена, а атрибут цикла должен быть определен как <audio loop = "loop">.
hmd
-4

audioАтрибут автозапуска HTML5 по умолчанию не работает в Chrome, но вы можете принудительно включить автозапуск звука с помощью JavaScript. Попробуй это:

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

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

Махтаб Алам
источник
3
Дело не в том, что автовоспроизведение «не работает», а в том, что оно подчиняется политике, согласно которой автовоспроизведение, если не будет работать, если требования политики не выполняются. См. Developers.google.com/web/updates/2017/09/… . Этот код не обходит эту политику. Если это сработало для вас, это потому, что вы достигли порога и / или установили какой-то флаг разработчика. Но, как говорится на этой странице, нельзя предполагать, что это сработает для всех.
ADyson 06
По крайней мере, в FF 66 это тоже не сработает. Новая политика заключается в том, чтобы заблокировать play (), если он каким-то образом не был вызван взаимодействием с пользователем.
Randy