I am trying to play a random sound effect once the button is click. Basically, I created an array of sound as shown below. My goal is, when the users click the button, I want to pick a random sound from an array, this only works once the page is refreshed. But when the users click the button at the second or third time, it will return just return the same result over and over again.
function sound_return(){
var sound_array = ["sound1.mp3", "sound2.mp3"];
var sound = sound_array[Math.floor(Math.random() * sound_array.length)];
return sound;
}
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'sound/'+sound_return());
audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('#sound').click(function(event){
event.preventDefault();
audioElement.play();
});
You need to set the audio source and load it during every click
function sound_return(){
var sound_array = ["sound1.mp3", "sound2.mp3"];
var sound = sound_array[Math.floor(Math.random() * sound_array.length)];
return sound;
}
var audioElement = document.createElement('audio');
audioElement.addEventListener("load", function() {
audioElement.play();
btn.hide();
}, true);
audioElement.addEventListener("ended", function() {
btn.show();
}, true);
var btn = $('#sound').click(function(event){
event.preventDefault();
audioElement.setAttribute('src', 'sound/'+sound_return());
audioElement.load();
});
Related
So I have code that looks like this. I press the button and an mp3 plays. But I can't seem to find a way to make a stop button for this and was hoping y'all could help me.
Name of Song 1
Name of Song 2
var audios =
Array.prototype.map.call(document.getElementsByClassName("buttons")
, function (el) {
var audio = new Audio();
var src = el.id + ".mp3";
el.onclick = function () {
audio.src = src;
audio.play();
};
return audio;
});
I tried
function stopmusic() {
audio.pause();
}
document.getElementById('stopbuttons').addEventListener('click', stopmusic);
and
function stopmusic() {
audios.forEach(audio=>audio.pause());
audios.forEach(audio=>audio.currentTime = 0.0);
audios.forEach(audio=>audio.src = "");
}
document.getElementById('stopbutton').addEventListener('click', stopmusic);
but couldnt get it to work
use audio.pause(); to stop the audio
I am facing a problem for playing sound in javascript. The alert box is displayed but the chat sound doesn't play. Following is the code of chat.js.
for (x in newMessages) {
if (newMessages[x] == true) {
if (chatboxFocus[x] == false) {
//FIXME: add toggle all or none policy, otherwise it looks funny
$('#chatbox_'+x+' .chatboxhead').toggleClass('chatboxblink');
alert('before ');
var snd = new Audio("facebookchat.mp3");
snd.play();
alert('middle');
alert('after');
}
}
}
Try this:
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'facebookchat.mp3');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
Reffered: How to use a javascript to autoplay a html5 audio tag
It might help, in your case.
I found a little code snippet within another question, playing an mp3 just with jquery play() and pause():
<a href="#" rel="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3"
class="play">Play</a>
<div class="pause">Stop</div>
<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
var source = $('.play').attr('rel');
audioElement.setAttribute('src', source);
//audioElement.setAttribute('autoplay', 'autoplay');
audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('.play').click(function() {
audioElement.play();
});
$('.pause').click(function() {
audioElement.pause();
});
});
I get the audio source from the rel attribute of the "play"-link. Now I would like to add more audio links and make the source relative to their rel attributes.
I tried
var source = $(this).attr('rel');
and also .find() and .each(), but nothing worked so far. I've set up a jsfiddle with two audio links, where only the first audio file will be played. (The fiddle links to an external script, which the client uses on his site, where only jquery 1.4.3 is loaded, but I guess it's possible anyway. I just don't want to use an audio player plugin, I aim for a minimalistic solution.)
Any help would be highly appreciated!
You can update your script to create one audio tag per container:
$(document).ready(function () {
// For each container div
$(".container").each(function() {
// Create the HTML5 <audio> tag
var audioElement = document.createElement('audio');
// Find the play/pause buttons
var $play = $(this).find(".play");
var $pause = $(this).find(".pause");
// Load the source from the play button
var source = $play.attr('rel');
audioElement.setAttribute('src', source);
$.get();
// Play the sound when loaded
audioElement.addEventListener("load", function () {
audioElement.play();
}, true);
// When the user clicks on the play button, play the audio
$play.click(function () {
audioElement.play();
});
// When the user clicks on the pause button, pause it
$pause.click(function () {
audioElement.pause();
});
});
});
And updated Fiddle: http://jsfiddle.net/sY7UT/
I made a javascript audio test. All the function works in Opera FF and Chrome, except audio.oncanplaythrough, and audio.onended (this 2function dont work on Chrome).
<!DOCTYPE html>
<html>
<body>
<script>
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
audio.oncanplaythrough = function(){
audio.play();
}
audio.onended = function(){
alert('ended');
}
</script>
start<br/>
pause<br/>
volume<br/>
jump<br/>
</body>
</html>
oncanplaythrough is an event, not a method, and the other event is called ended and not onended.
So you need to listen for the events and act on them. Try:
audio.addEventListener('ended', function() {
alert('ended');
}, false);
and
audio.addEventListener('canplaythrough', function() {
audio.play();
}, false);
Add and play a sound via JavaScript
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'loading.ogg');
audioElement.play();
Get the song filepath and duration
audioElement.src;
audioElement.duration;
Load a sound
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'Mogwai2009-04-29_acidjack_t16.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
$(".duration span").html(audioElement.duration);
$(".filename span").html(audioElement.src);
}, true);
Stop a song
audioElement.pause();
Change volume
audioElement.volume=0;
Play at exactly 35 seconds in the song
audioElement.currentTime=35;
audioElement.play();
I've got this JavaScript/jquery code:
$(document).ready(function() {
var audioElement = document.createElement('audio');
var secondtrack = 'hangover.ogg';
audioElement.setAttribute('src', 'hangover.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('#play').click(function() {
audioElement.play();
});
$('#pause').click(function() {
audioElement.pause();
});
});
How could I get another song started after the first ended?
The AUDIO element should fire a "ended" event though I am not sure how well this is supported at the moment.
So you could try something like that:
audioElement.addEventListener('ended', function () {
// Play another song
});
See also:
http://dev.w3.org/html5/spec/Overview.html#event-media-ended