javaScript 无法播放音频

Question

我遇到音频无法播放的问题，我不知道为什么。

我在这个 .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 && !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(); 
}

问题是，它没有播放任何内容，我不知道为什么，感谢您的帮助

理论上它应该是这样的——浏览器启动，用户点击播放，然后一个接一个地播放音频，并具有暂停的能力。

Answer 1

直接在 audio 元素上设置音频源应该会有所帮助。这是一个简单的例子。

HTML:

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

JS：

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

您应该添加某种监听器以确保音频也可以 播放(see MDN for details on this)。这是上一个示例的扩展版本，您可以使用它来确保：

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

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

audioElement.addEventListener("canplaythrough", onCanPlay);

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

请注意，在附加“可以播放”侦听器后设置源很重要。

javaScript 无法播放音频

Audio does not play through javaScript

html

javascript

ejs

node.js

HTML:

JS：