39 lines
1.1 KiB
HTML
39 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>player</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
var audio;
|
|
var loaded = false;
|
|
var timer;
|
|
function setup() {
|
|
noCanvas();
|
|
audio = createAudio("sample.mp3", function() {
|
|
button = createSpan("▶️");
|
|
button.mouseClicked(function () {
|
|
audio.play();
|
|
});
|
|
button.style('cursor', 'pointer');
|
|
timer = createSpan(" 00:00:00");
|
|
createSpan(" / " + new Date(audio.duration() * 1000).toISOString().substr(11, 8));
|
|
loaded = true;
|
|
});
|
|
// audio.showControls();
|
|
// audio.elt.onplay = function () {
|
|
// console.log('onplay!');
|
|
// }
|
|
}
|
|
|
|
function draw() {
|
|
if (loaded) {
|
|
timer.html(" " + new Date(audio.time() * 1000).toISOString().substr(11, 8));
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|