Mick Redman: audio

Wednesday, 11 July 2012

HTML5 Audio Slideshow

Here, I've created a slideshow which syncs with a piece of audio. You can add different types of image and you can set the position in the audio when the image/slide appears. All free for you to play with.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Audio Slideshow</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
audio img
{
display:none;
}
#display_meta
{
width:300px;
min-height:225px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<br />
<img id="display_meta" src="1.png" /><br />
<audio id="greeting" controls="controls">
<source src="http://dl.dropbox.com/u/17154625/greeting.ogg" type="audio/ogg" />
<img src="jimmy.png" data-seconds="2" />
<img src="johnnie.png" data-seconds="4" />
<img src="julie.png" data-seconds="6" />
</audio>
<script>
var allImages = new Array(3);
var inc = 0, foundie = 0;
$('audio img').each(function()
{
allImages[inc] = new Array(3);
allImages[inc][0] = $(this).attr('src');
allImages[inc++][1] = $(this).data('seconds');
});
(function()
{
var displayTime = function()
{
var rVer = Math.round(greeting.currentTime);
foundie = giveBackImageName(rVer);
if(foundie != 0)
{
document.getElementById('display_meta').src = foundie;
}
}

var giveBackImageName = function(vr)
{
for (var i = 0; i < allImages.length; i++)
{
if(allImages[i][1] == vr)
{
return allImages[i][0];
}
}
return 0;
}
$('#greeting').bind('timeupdate', displayTime);
})();
</script>
</body>
</html>