单击按钮时，使用jQuery播放音频文件
单击按钮时，我尝试播放音频文件，但它不起作用，我的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>。延迟加载（需要时加载）如果声音很小，则声音是最好的方法。您可以动态创建音频元素，在加载音频元素时可以使用来启动.play()和暂停.pause()。
我们使用的东西
我们将使用canplay事件来检测我们的文件已准备好播放。
.stop()音频元素没有任何功能。我们只能暂停它们。而且，当我们要从音频文件的开头开始时，请更改其.currentTime。我们将在示例中使用此行audioElement.currentTime = 0;。要实现此.stop()功能，我们首先暂停文件，然后重置其时间。
我们可能想知道音频文件的长度和当前播放时间。我们已经在.currentTime上面学到了，要了解使用的长度.duration。
范例指南
- 准备好文档后，我们会动态创建一个音频元素
- 我们将其源设置为要播放的音频。
- 我们使用了’ended’事件来再次启动文件。
当currentTime等于其持续时间时，音频文件将停止播放。每当您使用时
play()，它将从头开始。
timeupdate每当音频.currentTime发生更改时，我们都使用事件来更新当前时间。canplay当文件准备播放时，我们使用事件来更新信息。- 我们创建了播放，暂停，重启按钮。
$(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>
$(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>
-
我想知道如何创建像这个网站上的按钮，当点击将播放一个简短的音频文件。 https://www.theitalianexperiment.com/learn-意大利语/to-be 我知道如何使用该元素添加音频文件，但我想以按钮格式将其添加到文本的左边（例如，添加到下面的代码中），就像在网站上一样，这就是我所坚持的。 HTML CSS 谢谢！
-
问题内容： 我有这个代码 它的工作原理，但不是我所期望的。声音会播放，但仅在我每次按下按钮时播放。我的主意是 当我按下按钮时，声音会播放，当我停止动作（手指在按钮之外）时，音乐会暂停。 有什么想法吗？ 谢谢 问题答案： 这应该可以工作（我认为您的开关柜出了点问题）：
-
我尝试建立一个按钮，一旦点击它播放一个音频文件，如果再次点击它停止它。在按钮中，有一个属性src，其中放置了应该播放的文件的路径。 null null 当我尝试单击该按钮时，日志显示“”。但音频已设置,警报显示文件路径在那里。 我做错了什么？
-
尝试使用mediacontroller通过url播放音频文件 但我有一个错误： 09-11 10:28:23.970:E/MediaPlayer（912）：尝试在没有有效MediaPlayer的情况下调用getDuration 09-11 10:28:23.970:E/MediaPlayer（912）：错误（-38,0）09-11 10:28:23.990:E/MediaPlayer（912）：尝
-
我在我的应用程序中编写了这段代码 接收器.java 它工作完美，但是我注意到屏幕关闭时播放音频有延迟。我想这是因为设备在启动关闭状态之前会调暗屏幕。 我希望它在单击触发关闭状态的操作（例如单击电源按钮、手势或双击以唤醒和睡眠）时播放关闭音频。在这种情况下，我希望它在触发电源按钮时播放。 有办法让这成为可能吗？
-
问题内容： 我正在用HTML5和Javascript制作游戏。 如何通过Javascript播放游戏音频？ 问题答案： 如果您不想弄乱HTML元素： 这使用了接口，该接口播放音频的方式与element相同。 如果需要更多功能，我使用了howler.js库，发现它简单实用。