Javascript Audio Play on click
JavascriptAudioOnclickJavascript Problem Overview
I have a JavaScript code to play a sound on click. It works on Chrome but on Firefox it starts on load.
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()">
Javascript Solutions
Solution 1 - Javascript
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="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>
Solution 2 - Javascript
JavaScript
function playAudio(url) {
new Audio(url).play();
}
HTML
<img src="image.png" onclick="playAudio('mysound.mp3')">
Supported in most modern browsers and easy to embed into HTML elements.
Solution 3 - Javascript
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>
Solution 4 - Javascript
Now that the Web Audio API is here and gaining browser support, that could be a more robust option.
Zounds is a primitive wrapper around that API for playing simple one-shot sounds with a minimum of boilerplate at the point of use.
Solution 5 - Javascript
You can do that in two line
let playSound = () => new Audio("src").play()
<button onclick="playSound()">Play</button>
Solution 6 - Javascript
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).
Solution 7 - Javascript
HTML:
<button onclick="play()">Play File</button>
<audio id="audio" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>
JavaScript:
let play = function(){document.getElementById("audio").play()}