点击 Javascript 音频播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18826147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Audio Play on click
提问by dA_uNknOwN
I have a javascript code to start a sound on click . It works on chrome but on firefox it starts onload, but I want it onclick there too.
我有一个 javascript 代码可以在单击时开始发出声音。它适用于 chrome，但在 Firefox 上它开始加载，但我也希望它在那里点击。
Can anyone help?
任何人都可以帮忙吗？
<script>
var audio = new Audio("http://music.ogg" ) ;
audio.oncanplaythrough = function(){
audio.play();
}
audio.loop = true;
audio.onended = function(){
audio.play();
}
</script>
<input type="image" src="http://button.png" onclick="audio.play()">
回答by Arunkumar
Try the below code snippet
试试下面的代码片段
<!doctype html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<script>
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="http://dev.interactive-creation-works.net/1/1.ogg"></audio>
</body>
</html>
回答by Bosnian Coder
JavaScript
JavaScript
function playAudio(url) {
new Audio(url).play();
}
HTML
HTML
<img src="image.png" onclick="playAudio('mysound.mp3')">
Supported in most modern browsers and easy to embed into HTML elements.
大多数现代浏览器都支持，并且易于嵌入到 HTML 元素中。
回答by Alex Karahanidi
That worked
那行得通
<audio src="${ song.url }" id="audio"></audio>
<i class="glyphicon glyphicon-play-circle b-play" id="play" onclick="play()"></i>
<script>
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
$('#play').removeClass('glyphicon-play-circle')
$('#play').addClass('glyphicon-pause')
}else{
audio.pause();
audio.currentTime = 0
$('#play').addClass('glyphicon-play-circle')
$('#play').removeClass('glyphicon-pause')
}
}
</script>
回答by Dave Elton
Now that the Web Audio APIis here and gaining browser support, that could be a more robust option.
现在Web Audio API已经出现并获得浏览器支持，这可能是一个更强大的选择。
Zoundsis a primitive wrapper around that API for playing simple one-shot sounds with a minimum of boilerplate at the point of use.
Zounds是该 API 的原始包装器，用于在使用时使用最少的样板播放简单的一次性声音。
回答by CFP Support
While several answers are similar, I still had an issue - the user would click the button several times, playing the audio over itself (either it was clicked by accident or they were just 'playing'....)
虽然有几个答案是相似的，但我仍然有一个问题 - 用户会多次点击按钮，播放音频（要么是意外点击，要么只是“播放”......）
An easy fix:
一个简单的修复：
var music = new Audio();
function playMusic(file) {
music.pause();
music = new Audio(file);
music.play();
}
Setting up the audio on load allowed 'music' to be paused every time the function is called - effectively stopping the 'noise' even if they user clicks the button several times (and there is also no need to turn off the button, though for user experience it may be something you want to do).
在加载时设置音频允许在每次调用函数时暂停“音乐” - 即使用户多次单击按钮也能有效地停止“噪音”（并且也不需要关闭按钮，但对于用户体验它可能是您想做的事情）。
