Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 ogg play
<!DOCTYPE html>
<html>
<head>
<style>
#song {
background-color: #CCC;
}
#song div {
width: 0;
background-color: #00F;
}
#button {
cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Play OGG</title>
</head>
<body>
<audio id="audio-element"
src="song.ogg"
style="width: 512px;">
</audio>
<script>
function loadedMetadata() {
channels = audio.mozChannels;
rate = audio.mozSampleRate;
frameBufferLength = audio.mozFrameBufferLength;
}
var audio = document.getElementById('audio-element');
audio.addEventListener('loadedmetadata', loadedMetadata, false);
audio.play()
function pause() {
if (audio.paused) {
audio.play()
$("#button").attr("class", "fa fa-stop")
} else {
audio.pause()
$("#button").attr("class", "fa fa-play")
}
}
setInterval(function() {
$("#song div").css("width", (audio.currentTime/audio.duration)*100+"%")
}, 100)
</script>
<span class="fa fa-stop" onClick="pause()" id="button">&nbsp;</span>
<div id="song"><div>&nbsp;</div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.