Блог

Главная - Вопросы по программированию - Аудио не воспроизводится через JavaScript

Аудио не воспроизводится через JavaScript

#javascript #html #node.js #ejs

Вопрос:

У меня проблема, когда аудио не воспроизводится, и я не знаю почему.

У меня есть этот тег audio и кнопки в этом документе .ejs, потому что я использую nodejs, и это выглядит так:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title><%= title %></title>
</head>
<body>
    <audio id="audio">
        <source id="audioSource" src="" type="audio/mpeg"/>
        Your browser does not support the audio element.
    </audio>

    <button onclick="playAudio()" type="button">Play Audio</button>
    <button onclick="pauseAudio()" type="button">Pause Audio</button> 
    <button onclick="check()" type="button">Check Audio Status</button>

    <script src="/js/sum.js"></script> 
</body>
</html>

внизу я подключаю документ JavaScript
, в документе есть несколько функций для каждой кнопки
: воспроизведение, приостановка и проверка состояния
при загрузке браузера, он должен начать воспроизведение одного из 4 файлов mp3, которые у меня есть в моей музыкальной папке
, после этого он прослушивает, когда звук будет завершен.а затем выбирает случайное число 1-4 и устанавливает для источника звука новый звук.

 
document.getElementById("audio").addEventListener("ended", myFunction);
const audio = document.getElementById("audio");
const source = document.getElementById('audioSource');

let firstTime = 0;

function check(){
   if (audio.duration > 0 amp;amp; !audio.paused) {
       alert("audio is playing");
   } else {
       alert("audio is not playing");
   }
}


function myFunction() {
   const i = Math.floor(Math.random() * 4)   1;
   source.src = `/music/sound${i}.mp3`;
   audio.play();
}

function playAudio() { 
   if (firstTime == 0){
       firstTime  = 1;
       let i = Math.floor(Math.random() * 4)   1;
       source.src = `/music/sound${i}.mp3`;
       audio.play();
   } else {
       audio.play(); 
   }
} 
function pauseAudio() { 
   audio.pause(); 
}

Проблема в том, что он ничего не воспроизводит, и я не знаю почему, любая помощь приветствуется

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

Ответ №1:

Установка источника звука непосредственно на audio элементе должна помочь. Вот краткий пример.

HTML:

 <audio id="audioSource" src=""></audio>

JS:

 const audioElement = document.getElementById("audioSource");
audioElement.src = `path/to/your.mp3`

Вы должны добавить какой-то прослушиватель, чтобы гарантировать, что аудио также может воспроизводиться (подробнее об этом см. MDN). Вот расширенная версия предыдущего примера, которую вы могли бы использовать, чтобы убедиться, что:

 const audioElement = document.getElementById("audioSource");

function onCanPlay(e) {
  this.play();
}

audioElement.addEventListener("canplaythrough", onCanPlay);

audioElement.src = `path/to/your.mp3`

Обратите внимание, что важно установить источник после подключения прослушивателя «can play».

Метки: