单击button时，使用jQuery播放audio文件
我试图播放audio文件，当我点击button，但它不工作，我的HTML代码是：
<html> <body> <div id="container"> <button id="play"> Play Music </button> </div> </body> </html> 我的JavaScript是：
$('document').ready(function () { $('#play').click(function () { var audio = {}; audio["walk"] = new Audio(); audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3" audio["walk"].addEventListener('load', function () { audio["walk"].play(); }); }); });
我也创造了一个小提琴 。
哪种方法？
您可以使用<audio>标签或<object>或<embed>播放audio。 延迟加载（需要时加载）如果尺寸很小，声音是最好的方法。 您可以dynamic创buildaudio元素，当它加载时，您可以使用.play()来启动它，并用.play()暂停它。
我们使用的东西
我们将使用canplay事件来检测我们的文件是否准备好播放。
audio元素没有.stop()函数。 我们只能暂停他们。 而当我们想从audio文件开始时，我们改变它的.currentTime 。 我们将在我们的例子中使用这一行audioElement.currentTime = 0; 。 要实现.stop()函数，我们首先暂停文件，然后重新设置它的时间。
我们可能想知道audio文件的长度和当前的播放时间。 我们已经了解到.currentTime以上，要了解它的长度，我们使用.duration 。
示例指南
- 当文档准备好时，我们dynamic地创build了一个audio元素
- 我们使用我们想播放的audio来设置它的源代码。
- 我们使用“已结束”事件再次启动文件。
当当前时间等于其持续时间audio文件将停止播放。 每当你使用
play()，它将从头开始。
- 每当audio
.currentTime更改时，我们使用timeupdate事件来更新当前时间。 - 当文件准备好播放时，我们使用
canplay事件来更新信息。 - 我们创build了button来播放，暂停，重新启动。
$(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3'); audioElement.addEventListener('ended', function() { this.play(); }, false); audioElement.addEventListener("canplay",function(){ $("#length").text("Duration:" + audioElement.duration + " seconds"); $("#source").text("Source:" + audioElement.src); $("#status").text("Status: Ready to play").css("color","green"); }); audioElement.addEventListener("timeupdate",function(){ $("#currentTime").text("Current second:" + audioElement.currentTime); }); $('#play').click(function() { audioElement.play(); $("#status").text("Status: Playing"); }); $('#pause').click(function() { audioElement.pause(); $("#status").text("Status: Paused"); }); $('#restart').click(function() { audioElement.currentTime = 0; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <h2>Sound Information</h2> <div id="length">Duration:</div> <div id="source">Source:</div> <div id="status" style="color:red;">Status: Loading</div> <hr> <h2>Control Buttons</h2> <button id="play">Play</button> <button id="pause">Pause</button> <button id="restart">Restart</button> <hr> <h2>Playing Information</h2> <div id="currentTime">0</div> </body>
对于其他任何人，我只是采取艾哈迈德的答案，并在这里更新原来的提问者的jsfiddle ，而不是 ：
audio.mp3
对于
files/nativedocuments/Track93.mp3
链接在网上免费提供的MP3。 感谢您分享简单的解决scheme！
在jQuery中的实际答案是
$("#myAudioElement")[0].play();
它不会像你期望的那样用一个简单的$("#myAudioElement").play()来工作。 官方的原因是，将它合并到jQuery中会为每个元素添加一个play()方法，这会导致不必要的开销。 所以相反，您必须通过在$("#myAudioElement")检索的DOM元素数组中的位置来引用它，也就是0。
这个引用来自一个关于它提交的bug ，它被closures为“feature / wontfix”：
为此，我们需要为每个DOM元素方法名称添加一个jQuery方法名称。 当然，这种方法对于非媒体元素不会做任何事情，所以看起来似乎不值得多余的字节。
我在这里有一个很好的和多function的解决scheme，
<script type="text/javascript"> var audiotypes={ "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function ss_soundbits(sound){ var audio_element = document.createElement('audio') if (audio_element.canPlayType){ for (var i=0; i<arguments.length; i++){ var source_element = document.createElement('source') source_element.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) source_element.setAttribute('type', audiotypes[RegExp.$1]) audio_element.appendChild(source_element) } audio_element.load() audio_element.playclip=function(){ audio_element.pause() audio_element.currentTime=0 audio_element.play() } return audio_element } } </script>
之后，您可以尽可能多地初始化audio：
<script type="text/javascript" > var clicksound = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3"); var plopsound = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3"); </script>
现在，您可以通过简单的事件调用来访问已初始化的audio元素
onclick="clicksound.playclip()" onmouseover="plopsound.playclip()"
