Skip to content

Instantly share code, notes, and snippets.

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