html-аудио в локальном сайте

Question

Пытаюсь вывести текст песни под звук этой песни, текст выводится, аудио не проигрывается, аудио лежат в той же папке, что и исходный код.

var main = async function() {
  const delay = (msec) => {
    return new Promise(resolve => setTimeout(resolve, msec));
  };

  const str2 = 'тебе не дают, окей, в ушах code10\nона знает этот swag, малыш2010\n';
  const str4 = 'они себя продают, окей, скажи мне ценник\nони знают этот swag, прошел свой тест на легит\n';
  const str5 = 'они знают, нам по кайфу влюбиться в наркоманку\n';
  const str7 = 'сливать с ней всю зарплату\nфонарь, подъезд и в банку\n';
  const str8 = 'знают, нам по кайфу влюбиться в наркоманку\n';
  const str10 = 'сливать с ней всю зарплату\nфонарь, подъезд и в банку';

  document.body.innerHTML = ''; //разбить строчки на константы и каждую константу засунуть в цикл

  for (let i = 0; i < str2.length; ++i) {
    let c = str2[i];
    if (c === '\n') c = '<br/>';
    document.body.innerHTML += c;
    await delay(105);
  }

  for (let i = 0; i < str4.length; ++i) {
    let c = str4[i];
    if (c === '\n') c = '<br/>';
    document.body.innerHTML += c;
    await delay(80);
  }

  for (let i = 0; i < str5.length; ++i) {
    let c = str5[i];
    if (c === '\n') c = '<br/>';
    document.body.innerHTML += c;
    await delay(75);
  }

  for (let i = 0; i < str7.length; ++i) {
    let c = str7[i];
    if (c === '\n') c = '<br/>';
    document.body.innerHTML += c;
    await delay(75);
  }

  for (let i = 0; i < str8.length; ++i) {
    let c = str8[i];
    if (c === '\n') c = '<br/>';
    document.body.innerHTML += c;
    await delay(75);
  }

  for (let i = 0; i < str10.length; ++i) {
    let c = str10[i];
    if (c === '\n') c = '<br/>';
    document.body.innerHTML += c;
    await delay(75);
  }
}
main();

<audio controls autoplay>
            <source src="audio.mp3" type="audio/mpeg">
            <source src="audio.ogg" type="audio/ogg">
  Ваш браузер не поддерживает воспроизведение аудио.
</audio>

Answer 1

Сразу две ошибки

Перезаписывать всё тело документа включая тег audio - весьма глупая затея. Как минимум из-за того, что после удаления тега звук прекратится. Создайте div и пишите текст в него.
Современные браузеры игнорируют autoplay до первого взаимодействия пользователя со страницей (в остальных случаях просто не выводят звук). Поэтому в играх делают загрузочный экран с кнопкой запуска, которую нужно явно нажать.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Эффект печатающей машинки</title>
    </head>
    <body>
        <audio controls onplay="main();">
            <source src="audio.mp3" type="audio/mpeg">
            <source src="audio.ogg" type="audio/ogg">
          Ваш браузер не поддерживает воспроизведение аудио.
        </audio>
        <div id="lyrics"></div>

        <script>
            var main = async function () {
                const delay = (msec) => {
                    return new Promise(resolve => setTimeout(resolve, msec));
                };

                const str2 = 'тебе не дают, окей, в ушах code10\nона знает этот swag, малыш2010\n';
                const str4 = 'они себя продают, окей, скажи мне ценник\nони знают этот swag, прошел свой тест на легит\n';
                const str5 = 'они знают, нам по кайфу влюбиться в наркоманку\n';
                const str7 = 'сливать с ней всю зарплату\nфонарь, подъезд и в банку\n';
                const str8 = 'знают, нам по кайфу влюбиться в наркоманку\n';
                const str10 = 'сливать с ней всю зарплату\nфонарь, подъезд и в банку';

                const lyrics = document.getElementById("lyrics");

                lyrics.innerHTML = ''; //разбить строчки на константы и каждую константу засунуть в цикл

                for (let i = 0; i < str2.length; ++i) {
                    let c = str2[i];
                    if (c === '\n') c = '<br/>';
                    lyrics.innerHTML += c;
                    await delay(105);
                }

                for (let i = 0; i < str4.length; ++i) {
                    let c = str4[i];
                    if (c === '\n') c = '<br/>';
                    lyrics.innerHTML += c;
                    await delay(80);
                }

                for (let i = 0; i < str5.length; ++i) {
                    let c = str5[i];
                    if (c === '\n') c = '<br/>';
                    lyrics.innerHTML += c;
                    await delay(75);
                }

                for (let i = 0; i < str7.length; ++i) {
                    let c = str7[i];
                    if (c === '\n') c = '<br/>';
                    lyrics.innerHTML += c;
                    await delay(75);
                }

                for (let i = 0; i < str8.length; ++i) {
                    let c = str8[i];
                    if (c === '\n') c = '<br/>';
                    lyrics.innerHTML += c;
                    await delay(75);
                }

                for (let i = 0; i < str10.length; ++i) {
                    let c = str10[i];
                    if (c === '\n') c = '<br/>';
                    lyrics.innerHTML += c;
                    await delay(75);
                }
            }
        </script>
    </body>
</html>

БЛОГ НА HUSL

html-аудио в локальном сайте

Ответы (1 шт):