codepo8/player.php

## player.php
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Audio archive</title>
  <style>
    body {
      font-family: helvetica,arial,sans-serif;
      color: #333;
      background: #f8f8f8;
      font-size: 14px;
      font-size: calc(1em + 1vw);
    }
    a { color: darkgreen; }
    h1 { font-size: 80%; }
    ul, p { font-size: 70%; }
    li {
      list-style: square;
      padding-bottom: 0.5em;
    }
  </style>
</head>
<body>
<h1>Audio archive</h1>
<p>Click to play, right-click to download</p>
<div id="audio"></div>
<ul>
<?php
$dir    = './';
$files = scandir($dir);
function human_filesize($bytes, $decimals = 2) {
  $sz = 'BKMGTP';
  $factor = floor((strlen($bytes) - 1) / 3);
  return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
}
foreach($files as $f) {
  if (preg_match("/mp3$/",$f)) {
    echo '<li><a href="'.$f.'">'.str_replace('_','',$f).'</a> ('.human_filesize(filesize($f)).')</li>';
  }
}
?>
</ul>
<script>
  var list = document.querySelector('ul');
  var audio = document.querySelector('#audio');
  var player;
  list.addEventListener('click', function(ev){
    ev.preventDefault();
    if (player) {player.remove();}
    player = document.createElement('audio');
    player.controls = true;
    player.autoplay = true;
    player.src = ev.target.href;
    audio.appendChild(player);
  });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Audio archive</title>
	<style>
	body {
	font-family: helvetica,arial,sans-serif;
	color: #333;
	background: #f8f8f8;
	font-size: 14px;
	font-size: calc(1em + 1vw);
	}
	a { color: darkgreen; }
	h1 { font-size: 80%; }
	ul, p { font-size: 70%; }
	li {
	list-style: square;
	padding-bottom: 0.5em;
	}
	</style>
	</head>
	<body>
	<h1>Audio archive</h1>
	<p>Click to play, right-click to download</p>
	<div id="audio"></div>
	<ul>
	<?php
	$dir = './';
	$files = scandir($dir);
	function human_filesize($bytes, $decimals = 2) {
	$sz = 'BKMGTP';
	$factor = floor((strlen($bytes) - 1) / 3);
	return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
	}
	foreach($files as $f) {
	if (preg_match("/mp3$/",$f)) {
	echo '<li><a href="'.$f.'">'.str_replace('_','',$f).'</a> ('.human_filesize(filesize($f)).')</li>';
	}
	}
	?>
	</ul>
	<script>
	var list = document.querySelector('ul');
	var audio = document.querySelector('#audio');
	var player;
	list.addEventListener('click', function(ev){
	ev.preventDefault();
	if (player) {player.remove();}
	player = document.createElement('audio');
	player.controls = true;
	player.autoplay = true;
	player.src = ev.target.href;
	audio.appendChild(player);
	});
	</script>
	</body>
	</html>