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

Цитата:

Сообщение от рони

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

Вот именно поэтому эти аргументы и были добавлены! Чтобы можно было по прежнему запускать звук в программах и ОС, и была возможность избавиться от шумных вкладок!

Цитата:

Сообщение от рони

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

У меня такое чувство, что если я не добавил кнопку Посмотреть! и не дописал полностью рабочий пример, то вы вообще не понимаете, о чём там речь!

Цитата:

Сообщение от рони

Firefox тоже не хочет воспроизводить

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

Например, автозапуск в браузере Google Chrome со звуком разрешен, если:

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

Добавил обработку исключения...

Цитата:

Сообщение от Lefseq

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

Фоновая музыка без возможности её отключить является плохой практикой!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
    
.audio-muting-button {
	position: fixed;
	top: 1em;
	left: 1em;
	background: white;
	border: 1px solid #f1f1f1;
	border-radius: 0.5em;
	box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
	font: 1em -apple-system, system-ui, sans-serif;
	text-transform: uppercase; 
	display: flex;
	align-items: center;
	padding: 0.5em;
	overflow: hidden;
	outline: none;
}

.audio-muting-button::before {
	content: "volume_off";
	font: 2em Material Icons;
	text-transform: none;
	margin-right: 0.25em;
}

.audio-muting-button.muted::before {
	content: "volume_up";
}

.audio-muting-button::after {
	content: "";
	position: absolute;
	background: #EEEEEE;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin: -25px;
	border-radius: 50%;
	transition: 300ms linear;
	transform: scale(0);
	z-index: -1;
}

.audio-muting-button:focus::after {
	transform: scale(5);
}
    
    </style>
	<script>

document.addEventListener("DOMContentLoaded", function() {
	var audio = new Audio("https://cdn.glitch.com/2e4efa25-4991-43a3-9729-bd42c161c6ce%2Faudio.mp3?v=1");
	audio.currentTime = "audioLastTime" in localStorage ? localStorage.audioLastTime : 0;
	audio.loop = true;
	audio.play().catch(function() {
		audio.muted = true;
		renderMutingLabel();
	});
	
	var button = document.createElement("button");
	button.className = "audio-muting-button";
	renderMutingLabel();
	button.addEventListener("click", function() {
		audio.muted ^= true;
		renderMutingLabel();
		audio.play();
	});
	function renderMutingLabel() {
		button.textContent = audio.muted ? "Tap to unmute" : "Tap to mute";
		button.classList.toggle("muted", audio.muted);
	}
	document.body.appendChild(button);

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

	</script>
  </head>
  <body></body>
</html>

Интересно, что после того как я нажал эту кнопку (у себя по адресу localhost:5000) пару десятков раз, браузер разрешил автозапуск (очевидно же, что на основе значения индекса заинтересованности пользователя)

UPD Интересно, что на форуме уже со второго раза разрешает автозапуск! (По крайней мере у меня!)