HTML5/JavaScript/jQuery audio playlist - javascript

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

Related

sound problems in safari and firefox (playing mp3 on mouseenter, click)

this code is working perfect in chrome but the sound isn´t playing in firefox and safari – i was tying some other ways to make it work but there was no solution with combining a single sound on mouseenter ond do the loop on click. – does someone know a solution
$(document).ready(function () {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/01T.wav');
audioElement.setAttribute('autoplay:false', 'autoplay');
$.get();
audioElement.addEventListener("load", function () {
audioElement.play();
}, false);
$('.letter1').mouseenter(function () {
$(this).addClass('shake shake-constant').stop().delay(3000).queue(function(){
$(this).removeClass('shake shake-constant');
});
audioElement.play();
});
var audioElementb = document.createElement('audio');
audioElementb.setAttribute('src', 'audio/01T.wav');
audioElementb.setAttribute('autoplay:false', 'autoplay');
audioElementb.loop=true;
$.get();
audioElementb.addEventListener("load", function () {
audioElementb.play();
}, false);
$('.letter1').on('click', function(){
$( this ).toggleClass( "serif shake2 shake-constant2" );
if (audioElementb.paused) {
audioElementb.play();
} else {
audioElementb.pause();
}
});
});

Playing Audio Using Jquery

I have a small jQuery function to play audio when a user clicks the link. I don't need any controls, they are short samples. I just want to play anytime a user clicks. Here is the html for the section that should play;
</div class="classicalRecordings">
Open song
</div>
Then this is the jQuery to play the sound;
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
audioElement.addEventListener("load", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
It doesn't seem to work. I think it has to do with the src variable, I am not sure I am passing it to the audioElement correctly. I have tested using an alert to be sure I am grabbing the data-audio-src correctly. Any help is appreciated.
I think that the event you're looking for is the loadeddata event.
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
// changed "load" t0 "loadeddata"
audioElement.addEventListener("loadeddata", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
Although you could probably be better off having a static audio element and changing the src attribute on user clicks rather than creating a new audio element.
// example
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function() {
this.play();
}, true);
function playMusic() {
var audioElementSrc = $(this).attr('data-audio-src');
audio.setAttribute('src', audioElementSrc);
};
$('.play').click(playMusic);
There is a framework for this that is worth checking out. ListenJS. I wrote it :)
Try something like this:
<audio id="sound">
<source src="music/classical/open.mp3" type="audio/mpeg">
</audio>
And from code:
$(function(){
$('#sound').get(0).play();
});

Minimalistic play() and pause() audio solution

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/

Random sound from array Javascript

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();
});

javascript audio onload

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();

Categories