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()">
BarryCap 3023 silver badges11 bronze badges asked Sep 16, 2013 at 10:47
0 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>
BarryCap 3023 silver badges11 bronze badges answered Sep 16, 2013 at 11:13
ArunkumarArunkumar 4,9004 gold badges25 silver badges39 bronze badges 2 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.
answered May 19, 2019 at 9:27 2 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>
answered Nov 7, 2016 at 18:01
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. answered Aug 18, 2017 at 12:14 Dave EltonDave Elton 1231 silver badge7 bronze badges You can do that in two line let playSound = () => new Audio("src").play()
<button onclick="playSound()">Play</button>
answered Sep 14, 2021 at 12:01
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). answered May 4, 2020 at 21:56
Apps-n-Add-OnsApps-n-Add-Ons 1,9171 gold badge17 silver badges28 bronze badges 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()}
answered Oct 24, 2020 at 16:04 fruitloaffruitloaf 7448 silver badges6 bronze badges 0 | 
