39 lines
1,015 B
HTML
39 lines
1,015 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>player</title>
|
|
<script src="./.js/p5.min.js"></script>
|
|
<script src="./.js/p5.sound.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
var audio;
|
|
var loaded = false;
|
|
var timer;
|
|
function setup() {
|
|
noCanvas();
|
|
audio = createAudio("./.audio/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>
|