JavaScript DOM音频未播放_Javascript_Dom_Audio_Html5 Audio

JavaScript DOM音频未播放

javascript dom audio

JavaScript DOM音频未播放,javascript,dom,audio,html5-audio,Javascript,Dom,Audio,Html5 Audio,好吧，我在这里发疯了我正试图为自己编写一个非常简单的播放器——一个粗糙但实用的东西 <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

好吧，我在这里发疯了

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

<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>

播放
var audio=新音频（）；
audio.src=“file.mp3”；//此文件与html页面位于同一目录中
var PlayAudio=函数（）
{
音频播放（）；
};

应该有用吧？我知道这不是最好的方法，但问题是：我已经将这段代码重写了几百次，但似乎没有任何效果。我甚至找不到任何错误代码/异常/任何东西。浏览器显示加载的文件很好。更奇怪的是，当我检查

audio

对象中的

paused

成员时，无论我调用

play（）

方法多少次，它仍然返回

true

当我在浏览器中以文件的形式加载页面时，你瞧，它正在播放！很好！但是如果我要将

onclick

事件更改为

audio.play（），它不再工作了。我想在服务器上运行这个
我保证没有额外的代码。没有JQuery，没有奇怪的服务器插件（甚至连PHP都没有！）。只有Apache、Windows，没有其他功能
我知道浏览器可以播放音频，因为当我复制audio.src
并转到地址时，它会播放得很好。即使是协议也很好；HTTP:///地址未尝试加载文件：///地址，反之亦然。（我需要将音频作为DOM播放，以便以后可以随机化音频文件；我只是想让浏览器首先播放一个文件。）
我知道我可以用一些JavaScript在HTML中实现这一点，但我知道这也可以在纯JavaScript中实现（忽略
），因为我很久以前就这样做了。那么，发生了什么变化
我还尝试使用window.onload
加载定义，但这也不起作用
所以。。。搞什么鬼？我很笨还是怎么的？我可以接受；我只想知道。
我想这是因为路径
指向mp3
文件。另外，将HTML
与JavaScript
代码分开，如下所示：
HTML
<button id="btn">Play</button>

像这样编写代码
<button onclick="PlayAudio();">Play</button>
<script>

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

播放
var PlayAudio=函数（）
{
var audio=新音频（“file.mp3”）
音频播放（）；
};

如果它仍然不起作用，那么如果您试图在纯Javascript中创建动态音频元素，也可以尝试编写onClick

在文档上创建一个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>

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>


测试音频播放


玩
var audio=document.getElementById（“myAudioTag”）；
audio.src=“file.mp3”；//此文件与html页面位于同一目录中
函数PlayAudio（）{audio.play（）；}
//#每当必须更改曲目时调用此函数
//#示例用法：changeAudio（“https://example.com/files/song2.mp3" );
函数changeAudio（inputURL）//是其他mp3文件的字符串
{
audio.src=输入URL；
音频播放（）；
}
您不应该在onclick
属性中使用javascript:
——这可能是原因？浏览器控制台有错误吗？我这样做是因为我有点老土。这不应该是问题所在。另外，我确实撒了一点谎；有一个console.log（“？”
调用PlayAudio（）
，它打印出那些问号，因此正在调用它。控制台中没有显示其他消息吗？（也许这些都是明显的问题，但要检查：您的声音打开了吗？选择了正确的输出设备？）控制台中没有其他消息。我可以直接在浏览器中播放音频文件，只需转到其地址即可；我甚至可以在HTML中将其作为音频元素播放。但它在JavaScript中失败，没有任何错误或警告。事实证明，该代码在Firefox中运行良好，但在Chrome中则不行。谢谢大家的帮助，谢谢你们的回答。不幸的是，它不起作用。audio对象是在全局范围内定义的，因此它应该仍然可以在PlayAudio范围内访问。似乎已经从答案中复制了submitted@AnthumChris不，是我自己写的self@zeroslash控制台有错误吗？没有，我的浏览器连咳嗽声都没有。我现在正在下载Firefox，看看这是否会有不同的表现。我没有否决你的意见，如果这能缩小范围的话。无论如何，该路径是有效的，因为当我用HTML编写它时，它是有效的。但是我需要这个在JavaScript中工作，这样我的代码就可以更容易地维护。我也没有投反对票，但我认为这不是一个好的答案，因为它提出的两个问题都通过这个问题得到了解决。PS：代码在Chrome中经过测试，运行良好。
PlayAudio ( "someOtherFile.mp3" );

<!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>