JavaScript DOM 音频未播放答案

【问题标题】：JavaScript DOM audio not playingJavaScript DOM 音频未播放
【发布时间】：2020-12-28 17:29:10
【问题描述】：

好吧，我在这里疯了。

我正在尝试为自己编写一个非常简单的播放器——一些粗糙但实用的东西。

<button onclick="javascript:PlayAudio();">Play</button>
<script>
var audio = new Audio();
audio.src = "file.mp3"; // this file is in the same directory as the html page
var PlayAudio = function()
{
    audio.play();
};
</script>

应该可以吧？我知道这不是最好的方法，但事情是这样的：我已经重写了这段代码几百次，但似乎没有任何效果。甚至没有任何错误代码/异常/我能找到的任何东西。浏览器说它已经很好地加载了文件。更奇怪的是，当我检查audio对象中的paused成员时，无论我调用多少次play()方法，它仍然返回true。

当我在浏览器中将页面作为文件加载时，你瞧，它开始播放了！正好！但是如果我将onclick 事件更改为audio.play();，它就不再起作用了。不过我想在服务器上运行它。

我向你保证没有额外的代码。没有 JQuery，没有奇怪的服务器插件（甚至没有 PHP！）。只有 Apache、Windows，没有别的。

而且我知道浏览器可以播放音频，因为当我复制audio.src 并转到该地址时，它会播放得很好。甚至协议都很好； HTTP:/// 地址未尝试加载 File:/// 地址，反之亦然。（我需要将音频作为 DOM 播放，以便以后可以随机化音频文件；我只是想让我的浏览器首先播放一个臭文件。）

我知道我可以用一些 JavaScript 在 HTML 中做到这一点，但我知道这也可以在纯 JavaScript 中工作（忽略<button>），因为我很久以前就做过了。那么发生了什么变化？

我也尝试使用window.onload 加载定义，但这也不起作用。

那么……到底是什么？我是傻还是怎么的？我可以接受；我只需要知道。

【问题讨论】：

您不应该在onclick 属性中需要javascript:——这可能是原因吗？浏览器控制台有错误吗？
我这样做是因为我有点老派。这不应该是问题。另外，我确实撒了一点谎。在PlayAudio() 中有一个console.log("???") 调用，它会打印出那些问号，所以它被调用了。
控制台中没有显示其他消息？（也许这些是明显的问题，但要检查：您的声音是否打开？选择了正确的输出设备？）
控制台中没有其他消息。我可以通过转到其地址直接在浏览器中播放音频文件；我什至可以将它作为 HTML 中的音频元素播放。但它在 JavaScript 中失败，没有任何错误或警告。
事实证明，该代码在 Firefox 中运行良好，但在 Chrome 中却不行。谢谢大家帮忙。

标签： javascript dom audio html5-audio

【解决方案1】：

我认为这是因为 path 到 mp3 文件。另外，将HTML 与JavaScript 代码分开，如下所示：

HTML

<button id="btn">Play</button>

JavaScript

const btnSound = document.querySelector('#btn');

btnSound.addEventListener('click', () => {
    const sound = new Audio('./file.mp3') // assuming it's in the directory
    sound.play();
});

【讨论】：

我没有对你投反对票，如果这样可以缩小范围的话。无论如何，路径是有效的，因为当我用 HTML 编写它时，它可以工作。但我需要它在 JavaScript 中工作，这样我的代码可以更容易维护。
我也没有投反对票，但我认为这不是一个好的答案，因为它建议的两件事都已通过问题解决。

【解决方案2】：

如果您尝试在纯 Javascript 中创建动态音频元素...

在您的文档上创建一个 div 以充当动态标签的容器
在 JS 中，创建音频元素，然后添加到页面（通过将其添加到 Div 容器）

然后你可以尝试这样的代码设置...

<div id="container">
<button onclick="PlayAudio('file.mp3')">Play</button>
<div>

<script>

//#create new audio tag
var myAudioElement = document.createElement( "audio");
myAudioElement.setAttribute("controls", "true" );
//myAudioElement.setAttribute("id", "myAudioTag"); //# if you'll need access "by ID"

//# add element to page DOM
document.getElementById('container').appendChild( myAudioElement );

function PlayAudio ( inputURL) //# input is a String like "file.mp3"
{
    myAudioElement.setAttribute("src", inputURL);
    myAudioElement.play();
}

</script>

注意：要在不单击按钮的情况下运行playAudio() 函数，只需调用：

PlayAudio ( "someOtherFile.mp3" );

PS：下面是一个“更好”方法的例子。更好在这里意味着更少的麻烦（更直观），但它使用您想要避免的 HTML。请注意没有指定.src，因为您仍然可以使用JS通过代码更新此类属性。

<!DOCTYPE html>
<html>
<body>

<h1>Test Audio Playback </h1>

<audio id="myAudioTag" controls> <source src=" " type="audio/mpeg"> </audio>

<br>
<button onclick="PlayAudio();"> Play </button>

</body>

<script>
var audio = document.getElementById("myAudioTag");
audio.src = "file.mp3"; // this file is in the same directory as the html page

function PlayAudio() { audio.play(); }

//# call this function whenever track must be changed
//# example use:  changeAudio( "https://example.com/files/song2.mp3" );
function changeAudio( inputURL) //is a String of some other mp3 file
{
    audio.src = inputURL;
    audio.play();
}

</script>
</html>

【讨论】：

PS：代码在 Chrome 中测试并且运行良好。

【解决方案3】：

这样写你的代码

<button onclick="PlayAudio();">Play</button>
<script>

var PlayAudio = function()
{
    var audio = new Audio("file.mp3")
    audio.play();
};
</script>

如果还是不行的话也试试 onClick 写

【讨论】：

感谢您的回答。不幸的是，它没有用。 audio 对象是在全局范围内定义的，因此它应该仍然可以在 PlayAudio 范围内访问。
好像是抄自已经提交的答案
@AnthumChris 不是我自己写的
@zeroslash 你在控制台有什么错误吗？
不，我的浏览器连咳嗽都没有。我现在正在下载 Firefox，看看它的行为是否会有所不同。