Имитация нажатия на кнопку в audio controls.

[III]

Я рассчитывал на тот вариант, что если автоплей сейчас в браузерах отключен и воспроизведение звука можно включить только после нажатия на кнопку или какого-то иного действия на странице, то сделав дополнительную страницу (назовём Старт), включаю на ней нажатием кнопки воспроизведение звука и этой же кнопкой делаю переадресацию для открытия в другой вкладке, второй страницы (назовём её ДР). Естественно открыты две страницы, за счет первой происходит воспроизведение звука, а вторая (др), она после переадресации отображена на экране и отображает выполнение сценария. После того как отключили автоплей, я находил в интернете вариант сайта где на странице была, точно не помню, толи кнопка толи ссылка, нажав на которую открывалась точно так же страница и начинала звучать фоновая музыка, при этом никаких дополнительных действии не производилось. Правда в тот момент я не разбирался, как это там всё работает.

[roland]

III, если отойти от технической стороны вопроса, мне тоже не до конца понятел смысл с позиции дизайна Вашего приложения:

Первоначально Вас интересовал вариант с одной страницей без клика.
Потом Вы допустили вариант со второй страницей, но с кликом на первой.
При этом Вы игнорируете вариант с одной страницей, но с тем же кликом.

Если это открытка, то почему просто не сделать оверлей с надписью "Показать открытку" или близкой по смыслу, скрывать его после нажатия, и показывать саму открытку вместе с аудиосопровождением?

[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");
   }

надо теперь для этой кнопки назначить запуск музыки на странице Старт.
Вариант моей страницы во вложении.
Всем спасибо за участие. Жду новые варианты если моя хотелка осуществима.

[Nexus]

Хочу сделать так, чтобы человек открыл страницу которую я ему скажу,
увидел "нажми меня" и всё заработало, как задумал автор.

И чем это отличается от предложенного мною варианта?
Тем, что на кнопке вместо "нажми меня" написано "Start", а под оверлеем вместо открытки кнопка управляющая воспроизведением музыки?

[III]

Уважаемый Nexus, Вы наверное не понимаете суть моей проблемы, ну или скажем хотелки. Необходимо при открытии страницы "ДР", одновременное начало анимации и включения аудио. В Вашем же варианте, пока не нажмёшь на кнопку аудио не воспроизводится. У меня и так на странице "ДР" есть кнопка начала воспроизведения музыки.
Откройте моё вложение и убедитесь. Почему предлагал две страницы? На странице "Старт" кнопка которая должна делать переадресацию на открытие "ДР" в новой вкладке и включать аудио для воспроизведения аудио на странице "Старт". Для примера, если в интернете открыть две страницы на одной из которых воспроизводится аудио, а на другой нет, то при переключении страниц фоновая музыка всё рано звучит. Вот этот вариант я и хочу использовать. Как сделать переадресацию я знаю, а вот как к этой же кнопки прикрутить включение аудио сразу после переадресации, не знаю. Может быть такой возможности нет? Ваш вариант с кнопкой с кусочком из моей открытку во вложении.

[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, но они слишком тяжелые, так что превью обойдется без них.

[III]

Nexus, спасибо за участие в моей проблеме. Насчет кода, честно говоря, я почти профан, это всё заслуги участников форумов и полученные знания из разных источников в инете, я просто с миру по нитке и из этих ниток что-то тку. Сейчас занят, а завтра отвечу на ваше сообщение. Всего Вам хорошего.

[III]

Nexus, ещё раз спасибо за рекомендации. Всё супер! Ваш вариант, я так понял, с блокировкой страницы, придумано отлично. Вот только плохо, что аудио зациклено. У меня аудио длится 3 минуты 15 сек. Если бы его отключить каким-то образом через это время или опять поставить блокировку на страницу или перезагрузить страницу, не знаю что лучше, то было бы вообще класс. Во вложении полный вариант того что у меня в итоге получилось. Спасибо большое за участие.

[Nexus]

III,

Вот только плохо, что аудио зациклено.

найдите в скрипте строку

audio.loop = true;

и замените её на

audio.loop = false;

У меня в примере это строка 195

[III]

Nexus, всё получилось как хотелось. Огромное спасибо. Уже пора присваивать статус не профессор а академик. Благодарю за терпеливое отношение к моей особе. Подарочек к 70-летию моего младшего дружка-рыбачка, я думаю будет неплохой. Долгих лет вам и крепкого здоровья.