random audio on end
by ostapische
HTML
<audio src=""></audio>
<img src="" style="width: 30px; cursor: pointer;" onclick="playPause( this );" />
JavaScript
// src for play button
var playSrc = "http://upload.wikimedia.org/wikipedia/commons/9/96/Crystal_Project_Player_play.png";
// src for pause button
var pauseSrc = "http://upload.wikimedia.org/wikipedia/commons/d/dd/Crystal_Project_Player_pause.png";
// array with sound's srcs
var audios = [ "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Shot.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Death.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Spawn.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Break.ogg" ];
// when window full loads
window.addEventListener( "load", function( windowLoadE ) {
// first 'img' element on the page
var img = document.getElementsByTagName( "img" )[ 0 ];
// set 'src' of 'img' to play
img.src = playSrc;
// first 'audio' element on the page
var audio = document.getElementsByTagName( "audio" )[ 0 ];
// set src attribute of first audio element to random src from audios array
audio.src = audios[ Math.round( Math.random() * ( audios.length - 1 ) ) ];
// when current audio ends
audio.addEventListener( "ended", function( event ) {
// first 'img' element on the page
var img = document.getElementsByTagName( "img" )[ 0 ];
// set 'src' of 'img' to play
img.src = playSrc;
// event.taget = our 'audio' tag
// set 'src' attribute of 'audio' tag to random src from 'audios' array
event.target.src = audios[ Math.round( Math.random() * ( audios.length - 1 ) ) ];
} );
} );
function playPause( img ) {
// first 'audio' element on the page
var audio = document.getElementsByTagName( "audio" )[ 0 ];
// if audio on pause
if ( audio.paused ) {
// start play
audio.play();
// set 'src' of 'img' to pause
img.src = pauseSrc;
// if audio playing
} else {
// set...