Воспроизведение музыки на сайте с прерванного места

[Lefseq]

Здравствуйте.

Возможно ли выполнить следующую задачу?

При заходе на страницу example.html начинает играть мелодия, но если страницу обновить мелодия начинает играть с самого начала, возможно ли сделать, чтобы после обновления страницы мелодия начинала звучать с прерванного места?

[Malleys]

При заходе на страницу example.html начинает играть мелодия, но если страницу обновить мелодия начинает играть с самого начала, возможно ли сделать, чтобы после обновления страницы мелодия начинала звучать с прерванного места?

Да, надо запомнить время, и при загрузке восстановить его! Этот способ требует добавления уникального id ко всем аудио...

<audio id="my-audio" src="audio.mp3" controls autoplay></audio>
<script>
	addEventListener("beforeunload", function(event) {
		localStorage.audioLastTimes = JSON.stringify(Array.from(document.querySelectorAll("audio[id]"))
		.reduce(function(data, audio) {
			data[audio.id] = audio.currentTime % audio.duration;

			return data;
		}, {}));
	});

	if("audioLastTimes" in localStorage) {
		Object.entries(JSON.parse(localStorage.audioLastTimes)).forEach(function(pair) {
			var audio = document.getElementById(pair[0]);
			if(!audio) return;
			audio.currentTime = pair[1];
		});
	}
</script>

[рони]

Lefseq,
не самый рациональный, но возможный вариант.

let audio = document.querySelector("audio");
let currentTime = Number(localStorage.audioTime||0);
audio.currentTime = currentTime;
let loop = ()=> {
localStorage.audioTime = audio.currentTime;
requestAnimationFrame(loop);
}
requestAnimationFrame(loop)
//audio.play()

[Lefseq]

Malleys,
Мне нужно чтобы без плеера на странице, просто фоновая музыка

[Lefseq]

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

[рони]

А где тут ссылку на песню прописать?

как создать автовоспроизведение не знаю.

[Malleys]

Мне нужно чтобы без плеера на странице, просто фоновая музыка

Так удалите атрибут controls

Если у вас предполагается проигрывание всё время одного файла, то можно и так...

<script>

(function() {
	var audio = new Audio();
	audio.src = "audio.mp3";
	audio.currentTime = "audioLastTime" in localStorage ? localStorage.audioLastTime : 0;
	audio.loop = true;
	audio.play();

	addEventListener("beforeunload", function(event) {
		localStorage.audioLastTime = audio.currentTime % audio.duration;
	});
})();

</script>

не самый рациональный, но возможный вариант.

Это вообще бессмысленно, оно ничего не рисует (и тем более, если переключиться на другую вкладку, то requestAnimationFrame не будет вызываться!)

[рони]

Malleys,
как заставить работать этот параметр autoplay или audio.play()?
браузеры против.

[Malleys]

как заставить работать этот параметр autoplay или audio.play()?

В спецификации HTML5 написано, что когда у аудио-элемента представлен атрибут autoplay, то браузер автоматически начнёт проигрывание аудио-ресурса с того момента, как только он сможет проигрывать без прерывании.

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

Если запустить Google Chrome c аргументом --autoplay-policy=no-user-gesture-required, то оно работает так, как описано в спецификации

chrome --autoplay-policy=no-user-gesture-required

[рони]

Если запустить Google Chrome c аргументом

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