Gebruikt OGG bestanden i.p.v. MP3.
Play | Pause | Volume down | Volume upCurrent song: farmer
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Monster RPG 2 OST HTML5 player</title>
<?php
# song list
$dir = opendir(".");
print "<script type=\"text/javascript\">\n";
print "\t\tvar songlist = new Array()\n";
$i = 0;
$songs = array();
while ($entry = readdir($dir)) {
if (strpos($entry, "ogg") === FALSE) {
continue;
}
$entry = preg_replace("/.ogg/", "", $entry);
$songs[$i] = $entry;
print("\t\tsonglist[$i] = \"$entry\"\n");
$i++;
}
closedir($dir);
print "\t</script>\n";
?>
<script type="text/javascript">
var num_tracks = songlist.length
var curr_track = 0
var ext = "ogg"
var audio
var paused = true
var played_once
var volume = 1.0
function is_safari()
{
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1){
if (ua.indexOf('chrome') > -1) {
return false;
}
else {
return true;
}
}
return false;
}
function start()
{
if (is_safari()) {
ext = "mp3"
}
audio = document.createElement("audio")
setTimeout("update()", 1000)
}
function update()
{
for (i = 0 ; i < num_tracks; i++) {
document.getElementById(songlist[i]).innerHTML = "";
}
if (paused == false) {
if (audio.ended) {
next()
}
document.getElementById(songlist[curr_track]).innerHTML = "►";
}
else {
document.getElementById(songlist[curr_track]).innerHTML = "❚❚";
}
setTimeout("update()", 1000)
}
function next()
{
curr_track++
curr_track %= num_tracks
audio.setAttribute("src", "" + songlist[curr_track] + "." + ext)
audio.volume = volume
audio.load()
audio.play()
document.getElementById("currsong").innerHTML = songlist[curr_track]
}
function jump(n)
{
paused = false
played_once = true
curr_track = n-1
if (curr_track < 0) {
curr_track = num_tracks-1
}
next()
}
function play()
{
if (played_once) {
paused = false
audio.play()
}
else {
jump(0)
}
}
function pause()
{
if (paused) {
return
}
paused = true
audio.pause()
}
function volumedown()
{
if (volume > 0) {
volume = volume - 0.1
}
if (volume < 0) {
volume = 0
}
audio.volume = volume
}
function volumeup()
{
if (volume < 1.0) {
volume = volume + 0.1
}
if (volume > 1.0) {
volume = 1.0
}
audio.volume = volume
}
</script>
</head>
<body onload="start()">
<H1>Audio playlist (werkt niet in IE9)</H1>
<p>Gebruikt OGG bestanden i.p.v. MP3.</p>
<a href="javascript:play()">Play</a> | <a href="javascript:pause()">Pause</a> | <a href="javascript:volumedown()">Volume down</a> | <a href="javascript:volumeup()">Volume up</a>
<p>Current song: <span id="currsong">farmer</span></p>
<?php
for ($i = 0; $i < sizeof($songs); $i++) {
print "<div><div style=\"display: inline-block; width: 25px;\" id=\"" . $songs[$i] . "\"> </div><a href=\"javascript:jump($i)\">" . $songs[$i] . "</a></div>\n";
}
show_source(__FILE__);
?>
</body>
</html>