Skip to content

Instantly share code, notes, and snippets.

@raphaelbastide
Created January 14, 2013 22:31
Show Gist options
  • Save raphaelbastide/4534144 to your computer and use it in GitHub Desktop.
Save raphaelbastide/4534144 to your computer and use it in GitHub Desktop.
<audio> + random + autoplay
<audio> + random + autoplay
body{
text-align:center;
padding:20px 0 0 0 ;
font-family:arial;
letter-spacing:1px;
height:10px;
}
i{
font-style:normal;
}
<button id="play" class="played">❙❙</button>
<audio id="audio" loop="loop" data-duration="29">
<source src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" type="audio/ogg">
<source src="http://www.sounddogs.com/sound-effects/25/mp3/382997_SOUNDDOGS__do.mp3" type="audio/mp3">
</audio>
<p class="ran">A commenc? ? <i></i> sec.</p>
// Random playback
// You have to manually fill the data-duration attribute in HTML audio tag :(
// No chrome support yet
var audio = $('#audio'),
totalTime = audio.attr('data-duration'),
startTime = Math.floor(Math.random() * totalTime);
console.log(startTime);
audio[0].currentTime = startTime; // No Chrome support at this point
$(".ran i").prepend(startTime);
// Autoplay
audio.trigger("play");
// Toggle play / pause on click
$('#play').click(function(){
var $this = $(this);
if ($this.hasClass('paused')){
$this.removeClass('paused').addClass('played').html('❙❙');
audio.trigger("play");
}else if($this.hasClass('played')){
$this.removeClass('played').addClass('paused').html('▶');
audio.trigger("pause");
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment