Как проиграть mp3?

Question

[Анатолий]

Что пробовал:

var sound = new Audio();
function sound(){
    sound.pause();
    sound.currentTime = 0;
    sound.src = "sound.mp3";
    sound.play();
}
sound();

new Audio("sound.mp3").play();

var audioElement = new Audio("sound2.wav");
audioElement.play();

Comments

[Анатолий]

Пашенька, ага.
Вот к примеру рабочий пример:
https://fooobar.com/questions/17284/playing-audio-...
запускаю играет, копирую себе или на codepen - не играет.
Файлы разные пробовал, не помогает.

Спросил тут ))

[Пашенька]

Анатолий, у вас буквы платные чтоли?) Назовите переменную sound и функцию по-разному.

[Анатолий]

Пашенька, не получается, вот добавьте на codepen, у Вас будет звук?

var saudios = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
saudios.play();

[Пашенька]

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

[Анатолий]

Пашенька, а кликать обязательно?
я на таймаут вешаю и тишина

[Пашенька]

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

[Анатолий]

Пашенька, есть какие-то решения, может пример или ссылка на статью?

[Владимир]

Вот такая картинка, если просто вешать на автоплей, если пользователь в настройках разрешит его, все будет работать нормально.
https://codepen.io/casufi/pen/BaNOYQJ

[Анатолий]

Владимир, а решения-то есть?

[imdeveloper]

https://jsfiddle.net/jfc65ne4/

[Анатолий]

imdeveloper, я наверно как-то не понятно пишу, мне нужно проиграть без клика, например по таймауту:

var timeActivation = setTimeout(() => new Audio("sound.mp3").play(), 12000);

[imdeveloper]

Анатолий, написал в ответах

[Владимир]

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

[Анатолий]

Владимир, я же не спорю. Просто видел что онлайн-консультанты пикают.
Сейчас почитал, вроде как через iframe можно сделать, но для меня это не вариант, а хаков в Интернете никаких не нашел.

[antonwx]

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

[Анатолий]

antonwx, iframe не запретить!

[Владимир]

Анатолий, Чтобы документ мог воспроизводить звук, нужно чтобы пользователь сначала взаимодействовал с ним.
https://codepen.io/casufi/pen/BaNOYQJ?editors=1010
Дайте ему один раз кликнуть, а потом сможете проигрывать когда вам удобно

Answer 1

[imdeveloper]

Вот так будет работать, как вы ожидаете https://jsfiddle.net/d7tkqs4v/

Comments

[Анатолий]

у меня нет звука

[imdeveloper]

Анатолий, у меня все работает. с 2018 года подобные вещи запретили. но все еще работает вот так, как я выше написал, кроме браузера Firefox

[zkrvndm]

Чисто теоретически, можно попробовать инициализировать воспроизведение не по клику, а по движению курсора над body, например или на событие скрола. Как я понимаю, чтобы авто плей сработал, он должен запускается в ответ на какое-то событие и не обязательно это клик, но это не точно, надо проверять)

[Анатолий]

Надим Закиров, таймаут, скрол,.. не работает.
Можно извратится и на весь документ клик сделать )) Но это не мой путь ))

[imdeveloper]

Анатолий, вариант как я прислал - это пожалуй лучшее, что есть

[Анатолий]

imdeveloper, возможно Вы разрешили в браузере autoplay, а по умолчанию - это отключено.
Ваш пример работает в jsfiddle.net потому что там через iframe, а на сайте работать не будет, только опять же если через iframe

[zkrvndm]

Анатолий, ну почему же, можно на крайняк клик на весь документ навесить. Если при входе на сайт показывать какое-нибудь надоедливое всплывающее окно, например, с информированием о кукисах, то нужный от пользователя клик по любому будет.

[Анатолий]

Надим Закиров, это не мой путь, мне настолько оно не нужно ))

[Дмитрий Беляев]

Надим Закиров, чисто без теории, действия требующие user interaction можно запустить только после click или keypress
а вот поймать эти события можно реально хоть на body
притом медиа элементы запоминают, что их запускали со звуком, так что вполне проканаетaudio.play().then(() => audio.pause()) для активации

[Дмитрий Беляев]

ну и еще из хитростей:
при muted === true - браузер считает что звук выключен, и не запрещает автоплей, но и не активирует хак выше
но при volume === 0 - звук включен, хоть и убавлен до полностью не слышимого

[zkrvndm]

Дмитрий Беляев, с точки зрения безопасности, звучит все логично, но я тут внезапно задумался, а как же фреймы с плеерами от ютуб умудряются автовоспроизводится? Возможно все таки есть какие-то еще более хитрые обходные маневры?

[Дмитрий Беляев]

Надим Закиров, десктопные браузеры еще ведут статистику, на каких сайтах люди запускают видео, притом такая статистика есть общая и персональная. Если Вы постоянно будете на некотором сайте запускать видео, то персонально у Вас этот сайт получит разрешение на автозапуск. А такие сайты как ютуб, инстаграм или твич имеют такие разрешения по общей статистике.
Ну и на телефонах вроде как все проще, нельзя и все.

[zkrvndm]

Дмитрий Беляев, ну тогда решение очевидно, автору поста надо просто запихнуть свое аудио на ютуб, а на сайте банально встроить невидимый фрейм с авто-воспроизведением.