Имитация нажатия на кнопку в audio controls.
Всем привет. Есть audio controls для воспроизведения музыки.
<audio controls class="muz"> <source src="music/1.mp3" type="audio/ogg" /> Есть ли возможность с помощью JS имитировать нажатие на кнопку для начала воспроизведения музыки сразу после загрузки страницы? Знаю раньше была такая возможность, сейчас в браузере это отменили. Обойти этот запрет можно? Всем спасибо за участие. |
Цитата:
Вам дай волю - вы достанете этими звуками и видосами... |
Юзер если захочет может разрешить автозапуск для твоего сайта(слева у адресной строки кнопочка). А если не захочет - то и не надо.
|
Да мне это надо не для сайта в интернете, а для автономной страницы. Пусть будет не audio controls, а простая обычная кнопка.
|
III, на локальной странице в FF ты точно также можешь разрешить автовоспроизведение. В хроме увы нет.
Простая обычная кнопка кликается button.click(). Но аудио это тебе не воспроизведёт.:) |
Спасибо, всё стало понятно. Значит программное нажатие на кнопку тут не сработает.
|
Снова здравствуйте. Хотелось бы уточнить ещё такой вопрос по этой теме.
Речь опять же об автономной форме. Если сделать дополнительно страницу HTML в папке где основная страница, поместить туда кнопку, которая будет перенаправлять на основную страницу, примерно так
<button id="button">
<i class="fas fa-volume-up"></i>
</button>
<button onclick="window.open('ДР.html','_self');">
. В этой новой странице, от этой же кнопки включается музыка. Всё остальное выполняется на основной странице. Такой вариант возможен? Если да, то подскажите скрипт как это сделать.Всем спасибо. |
По сути, единственное, что требуется от пользователя - кликнуть по странице, чтобы разрешить проигрывать аудио.
Если очень хочется запустить медиа на странице, то почему не сделать как-то так?
<style>
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .7);
z-index: 1;
}
</style>
<div class="overlay">
<button type="button" disabled>
Loading...
</button>
</div>
<button type="button" data-role="play-pause-button">
Pause
</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const audio = new Audio();
const play = () => {
audio.play().catch(e => {
alert(e.message);
});
};
audio.addEventListener('canplaythrough', () => {
const button = document.querySelector('.overlay button');
if (!button) {
return;
}
button.textContent = 'Start';
button.disabled = false;
button.addEventListener('click', () => {
document.querySelector('.overlay')?.remove();
audio.muted = false;
audio.loop = true;
audio.volume = 1;// 0..1
play();
}, {once: true});
});
audio.addEventListener('error', () => {
alert(audio.error?.message ?? 'Something went wrong');
});
audio.src = 'https://mp3bob.ru/download/muz/Rick_Astley_-_Never_Gonna_Give_You_Up_[www.mp3pulse.ru].mp3';
document.querySelector('[data-role="play-pause-button"]')?.addEventListener('click', e => {
const button = e.target;
if (audio.paused) {
button.textContent = 'Pause';
play();
} else {
button.textContent = 'Play';
audio.pause();
}
});
});
</script>
|
Это практически тоже самое, что и нажать кнопку на audio controls. Мне надо, чтобы пользователь нажал один раз где-нибудь кнопку в результате всё заработало, страница открылась, музыка играет и все действия на странице выполняются согласно сценария. У меня страница сделана пипа открытки, хочется сделать так, чтобы пользователь не делал лишних манипуляций. Важно чтобы воспроизведение музыку начиналась сразу после открытия страницы.
|
Что-то я не догоняю, в чем разница между кнопкой на целевой странице и кнопкой на первой странице, которая будет открывать вторую?
Что там кнопка, что там. Единственное отличие в том, что первый вариант позволит проигрывать аудио, а второй - нет. В любом случае, ваша задача не решаема способом, на котором вы настаиваете. |
Я рассчитывал на тот вариант, что если автоплей сейчас в браузерах отключен и воспроизведение звука можно включить только после нажатия на кнопку или какого-то иного действия на странице, то сделав дополнительную страницу (назовём Старт), включаю на ней нажатием кнопки воспроизведение звука и этой же кнопкой делаю переадресацию для открытия в другой вкладке, второй страницы (назовём её ДР). Естественно открыты две страницы, за счет первой происходит воспроизведение звука, а вторая (др), она после переадресации отображена на экране и отображает выполнение сценария. После того как отключили автоплей, я находил в интернете вариант сайта где на странице была, точно не помню, толи кнопка толи ссылка, нажав на которую открывалась точно так же страница и начинала звучать фоновая музыка, при этом никаких дополнительных действии не производилось. Правда в тот момент я не разбирался, как это там всё работает.
|
III, если отойти от технической стороны вопроса, мне тоже не до конца понятел смысл с позиции дизайна Вашего приложения:
Первоначально Вас интересовал вариант с одной страницей без клика. Потом Вы допустили вариант со второй страницей, но с кликом на первой. При этом Вы игнорируете вариант с одной страницей, но с тем же кликом. Если это открытка, то почему просто не сделать оверлей с надписью "Показать открытку" или близкой по смыслу, скрывать его после нажатия, и показывать саму открытку вместе с аудиосопровождением? |
-Первоначально Вас интересовал вариант с одной страницей без клика. Если автоплей заблокирован, то этот вопрос отпадает.
-Потом Вы допустили вариант со второй страницей, но с кликом на первой. Уточняю, есть две страницы основная, там где выполняется основной сценарий, ДР. Вторая страница Старт, тут кнопка, которая запускает открытие ДР в другой вкладке и запускает воспроизведение звука на странице Старт. Это основной вариант для обсуждения. - При этом Вы игнорируете вариант с одной страницей, но с тем же кликом. Этот вариант отбрасываем т.к. у меня и так на странице есть <audio controls class="muz"> <source src="music/1.mp3" type="audio/ogg" />. Его я хочу убрать, т.к. хочу чтобы аудио начиналось с момента открытия страницы, потому что весь сценарий привязок к музыке. И чем вариант с кнопкой отличается от того что у меня на данный момент есть? Имеется ввиду вариант с одной страницей. Хочу сделать так, чтобы человек открыл страницу которую я ему скажу, увидел "нажми меня" и всё заработало, как задумал автор. Проблема в том что я мало смыслю в скриптах и не знаю решаема ли моя задумка. Пока сделал так. Переадресацию для открытия в новой вкладке осуществляю так <button onclick=" myFunc()"> open in a new tab</button>
function myFunc(){
window.open("ДР.html");
}
надо теперь для этой кнопки назначить запуск музыки на странице Старт. Вариант моей страницы во вложении. Всем спасибо за участие. Жду новые варианты если моя хотелка осуществима. |
Цитата:
Тем, что на кнопке вместо "нажми меня" написано "Start", а под оверлеем вместо открытки кнопка управляющая воспроизведением музыки? |
Уважаемый Nexus, Вы наверное не понимаете суть моей проблемы, ну или скажем хотелки. Необходимо при открытии страницы "ДР", одновременное начало анимации и включения аудио. В Вашем же варианте, пока не нажмёшь на кнопку аудио не воспроизводится. У меня и так на странице "ДР" есть кнопка начала воспроизведения музыки.
Откройте моё вложение и убедитесь. Почему предлагал две страницы? На странице "Старт" кнопка которая должна делать переадресацию на открытие "ДР" в новой вкладке и включать аудио для воспроизведения аудио на странице "Старт". Для примера, если в интернете открыть две страницы на одной из которых воспроизводится аудио, а на другой нет, то при переключении страниц фоновая музыка всё рано звучит. Вот этот вариант я и хочу использовать. Как сделать переадресацию я знаю, а вот как к этой же кнопки прикрутить включение аудио сразу после переадресации, не знаю. Может быть такой возможности нет? Ваш вариант с кнопкой с кусочком из моей открытку во вложении. |
III, судя по тому что я увидел, вы с кодом даже не на "вы", а по "фамилии/отчеству".
Глядите, что у меня получилось поправив синтаксические ошибки в html и css и запустив ваш код после нажатия на кнопку "Нажми меня": *!* АХТУНГ: звук НЕВОЗМОЖНО отключить до перезагрузки страницы! */!*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Андрюха день рождения</title>
<style>
.container {
width: 100%;
margin: 0 auto;
max-width: 1064px;
}
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
z-index: 10;
}
@supports (display: grid) {
.image-stack {
display: grid;
position: relative; // необходимо, чтобы перекрытие работало
grid-template-columns: repeat(12, 1fr);
}
#test {
float: left;
z-index: 5;
}
.voda {
float: left;
z-index: 1; // говорит браузеру сделать это изображение сверху
}
.prud {
float: left;
z-index: 1; // говорит браузеру сделать это изображение сверху
}
.voda {
width: 1064px;
height: 310px;
grid-column: 4 / -1;
grid-row: 1;
margin-top: 20em;
margin-left: 0em;
}
.prud {
grid-column: 4 / -1;
grid-row: 1;
margin-top: 6.2em;
margin-left: 0em;
}
#test {
width: 32vw;
height: 25vw;
position: absolute;
top: 0;
left: -19em;
top: 4em;
right: 0;
margin: auto;
text-align: left;
color: white;
font: 500 30px/1.5 'Syncopate', sans-serif;
font-style: italic;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0, 0, 0, 0.10),
0 0px 5px rgba(0, 0, 0, 0.10),
0 1px 3px rgba(0, 0, 0, 0.30),
0 3px 5px rgba(0, 0, 0, 0.20),
0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.20),
0 20px 20px rgba(0, 0, 0, 0.15);
font-size: 2vw;
}
}
</style>
</head>
<body>
<div class="overlay">
<button type="button" disabled>
Загрузка...
</button>
</div>
<div class="container">
<div class="image-stack">
<img class="voda" src="pictures/Вода.gif" alt="" />
<img class="prud" src="pictures/Пруд.png" alt="" />
<div id="test">
С днём рождения, Андрюха !<br>
Дорогой наш рыбачок,<br>
Пусть всегда, без промедления,<br>
Рыбка дёргает крючок.<br>
Чтобы ты её, родную, <br>
Не ждал полдня на берегу, <br>
А ловил её большую, <br>
В море, в речке и в пруду ! <br>
</div>
</div>
</div>
<script>
const MP3_URL = 'https://mp3bob.ru/download/muz/Rick_Astley_-_Never_Gonna_Give_You_Up_[www.mp3pulse.ru].mp3';
document.addEventListener('DOMContentLoaded', () => {
// Для печати стихотворения
const printText = () => {
var textNodes = [];
var textNodes_data = [];
var i = 0;
function search_textNodes(b) {
b = b.childNodes;
for (var c = 0, d = b.length; c < d; c++) {
var a = b[c];
if (a.nodeType == 3) {
textNodes.push(a);
textNodes_data.push(a.data);
a.data = ""
} else a.hasChildNodes() && search_textNodes(a)
}
};
var d = document.getElementById('test');
search_textNodes(d);
(function() {
var a = textNodes_data[i];
if (a) {
textNodes[i].data += a.charAt(0);
textNodes_data[i] = a.substr(1)
} else i++;
i < textNodes.length && setTimeout(arguments.callee, 160)
})();
}
// Загрузка аудио и начало работы
const audio = new Audio();
const play = () => {
audio.play().catch(e => {
alert(e.message);
});
};
audio.addEventListener('canplaythrough', () => {
const button = document.querySelector('.overlay button');
if (!button) {
return;
}
button.textContent = 'Нажми на меня';
button.disabled = false;
button.addEventListener('click', () => {
document.querySelector('.overlay')?.remove();
audio.muted = false;
audio.loop = true;
audio.volume = 1; // 0..1
play();
printText();
}, {
once: true
});
});
audio.addEventListener('error', () => {
alert(audio.error?.message ?? 'Something went wrong');
});
audio.src = MP3_URL;
});
</script>
</body>
</html>
UPD. хотел вкорячить сюда еще и подключенные графические файлы как base64, но они слишком тяжелые, так что превью обойдется без них. |
Nexus, спасибо за участие в моей проблеме. Насчет кода, честно говоря, я почти профан, это всё заслуги участников форумов и полученные знания из разных источников в инете, я просто с миру по нитке и из этих ниток что-то тку. Сейчас занят, а завтра отвечу на ваше сообщение. Всего Вам хорошего.
|
Вложений: 1
Nexus, ещё раз спасибо за рекомендации. Всё супер! Ваш вариант, я так понял, с блокировкой страницы, придумано отлично. Вот только плохо, что аудио зациклено. У меня аудио длится 3 минуты 15 сек. Если бы его отключить каким-то образом через это время или опять поставить блокировку на страницу или перезагрузить страницу, не знаю что лучше, то было бы вообще класс. Во вложении полный вариант того что у меня в итоге получилось. Спасибо большое за участие.
|
III,
Цитата:
audio.loop = true; и замените её на audio.loop = false; У меня в примере это строка 195 |
Nexus, всё получилось как хотелось. Огромное спасибо. Уже пора присваивать статус не профессор а академик. Благодарю за терпеливое отношение к моей особе. Подарочек к 70-летию моего младшего дружка-рыбачка, я думаю будет неплохой. Долгих лет вам и крепкого здоровья.
|
| Часовой пояс GMT +3, время: 14:43. |