音频无法通过 JavaScript 播放答案

【问题标题】：Audio does not play through javaScript音频无法通过 JavaScript 播放
【发布时间】：2021-12-14 02:35:07
【问题描述】：

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

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

问题是，它没有播放任何东西，我不知道为什么，感谢任何帮助

理论上它应该是这样的——浏览器启动，用户点击播放，它会在音频之后播放音频，并且可以暂停。

【问题讨论】：

标签： javascript html node.js ejs

【解决方案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`

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

【讨论】：