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

Question

[L1nw0od]

Здравствуйте, нашел крутой аудиоплеер на кодепен, подскажите как сделать чтоб он срабатывал при прогузке страницы, а не при клике на кнопку.
Должно быть так - открываем страницу и начинает играть аудио, а уже если человек хочет ставит на паузу.
Пример вот

Answer 1

[Роман]

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

ЗЫ: вы даже не представляете сколько за сегодняшнюю ночь людей матюкнется в мой адрес за то что кинутая мной в ответе демка запускает музон))))

Comments

[L1nw0od]

Спасибо большое. Подскажи в какой строчке кода это сделали ?

[Роман]

36-47 и 110-112

[L1nw0od]

Роман, Спасибо большое.

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

Роман

ЗЫ: вы даже не представляете сколько за сегодняшнюю ночь людей матюкнется в мой адрес за то что кинутая мной в ответе демка запускает музон))))

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

[Роман]

Дмитрий Беляев, у меня firefox 60.9.0esr, и в нем запускает. В хроме на мобилке не запускает.

[L1nw0od]

Роман, Можешь пожалуйста помочь решить баг в твоем коде. При переключении трека чтобон автопроигрывался, там когда переключаешь - ничего не происходит (

[Роман]

L1nw0od, ну во первых это не мой код, я всего лишь добавил 3 строчки в конец скрипта)) во вторых объясни подробнее:
1. как ты переключаешь трэк чтобы он автопроигрывался?
2. как выглядит твое "ничего не происходит"?

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

[L1nw0od]

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

[Роман]

L1nw0od, еще раз повторюсь, это не моя работа. Я в коде сделал следующее:

заменил

это

playButton.addEventListener("click", () => {
	playerArea.classList.toggle("play")
	if (audioPlayer.paused) {
		setTimeout(()=> {audioPlayer.play()}, 300)
		timer = setInterval(updateDurationLabel, 100)
	} else {
		audioPlayer.pause()
		clearInterval(timer)
	}
}, false)

на

это

const playMusic = () => {
	playerArea.classList.toggle("play")
	if (audioPlayer.paused) {
		setTimeout(()=> {audioPlayer.play()}, 300)
		timer = setInterval(updateDurationLabel, 100)
	} else {
		audioPlayer.pause()
		clearInterval(timer)
	}
}

playButton.addEventListener("click", playMusic , false);

И если вы понимаете хот чуть в js то вам будет очевидно, что данные действия не могли испортить плеер

далее я добавил в конец скрипта

эти строчки

window.onload = ()=>{
	setTimeout(playMusic,2000);
}

и тут очевидно, что данный код никак не мог испортить плеер.

таким образом, если плеер где то глючит, то очевидно что это не моя вина.

Теперь можно поговорить предметно. В оригинальной версии плеера (той ссылку на которую вы кинули в своем вопросе) присутствует этаже проблема. если запустить музыку, затем нажать следующий или предыдущий трэк, то все работает пока мы не домотаем до трека "LA Chill Tour". При этом данная проблема наблюдается только с треком "LA Chill Tour", не знаю почему так происходит. Для решения этой проблемы предлагаю задать отдельный вопрос, может кто и сможет что подсказать.

[L1nw0od]

Роман, я понял. Странно со всех устройств пробую не срабатывает (
--
Переключение не срабатывает (( постараюсь еще покопаться(

[Роман]

L1nw0od, у меня есть подозрение что код тут не причем а причиной является сам трек (может кодек какой то другой в нем или еще что). На моем телефоне вообще конкретно этот трек не воспроизводится.

[L1nw0od]

Роман, я заметил что у первого трека нет окончания в конце mp3 - может из-за этого ?

[Роман]

L1nw0od, да, вы правы, ссылка на первый трек в коде (в вашем варианте) изначально уже была не правильной. исправил в своем варианте, тестируйте.

https://codepen.io/lastuniverse/pen/QWWyjYq