Цитата:
Сообщение от рони
для клиента добавлять аргументы на запуск, наверно не выход.
|
Вот именно поэтому эти аргументы и были добавлены! Чтобы можно было по прежнему запускать звук в программах и ОС, и была возможность избавиться от шумных вкладок!
Цитата:
Сообщение от рони
для клиента добавлять аргументы на запуск, наверно не выход.
|
У меня такое чувство, что если я не добавил кнопку Посмотреть! и не дописал полностью рабочий пример, то вы вообще не понимаете, о чём там речь!
Цитата:
Сообщение от рони
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 Интересно, что на форуме уже со второго раза разрешает автозапуск! (По крайней мере у меня!)