<!doctype html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<input type="file" id="input">
<input type="button" id="control_button" value="STOP" onclick="play_it()" disabled="true">
<script type="text/javascript">
var play_button = document.getElementById("control_button");
var actx = new (AudioContext || webkitAudioContext)();
var audioData, srcNode; // global so we can access them from handlers
// Load some audio (CORS need to be allowed or we won't be able to decode the data)
//fetch(src, {mode: "cors"}).then(function(resp) {return resp.arrayBuffer()}).then(decode);
// Get local audio file
const reader = new FileReader();
const selectedFile = document.getElementById("input");
selectedFile.addEventListener("change", handleFiles, false);
function handleFiles() {
// Read the file now!
reader.readAsArrayBuffer(selectedFile.files[0]);
}
var buffer;
reader.addEventListener("loadend", filesReady, false);
function filesReady() {
// Load ended - fill the buffer
buffer = reader.result;
play_button.disabled = false;
decode(buffer);
}
// Decode the audio file, then start the show
function decode(buffer) {
actx.decodeAudioData(buffer, playLoop);
}
// Sets up a new source node as needed as stopping will render current invalid
function playLoop(abuffer) {
if (!audioData) {
audioData = abuffer; // create a reference for control buttons
}
srcNode = actx.createBufferSource(); // create audio source
srcNode.buffer = abuffer; // use decoded buffer
srcNode.connect(actx.destination); // create output
srcNode.loop = true; // takes care of perfect looping
srcNode.start(); // play...
}
// Playback control
function play_it() {
if (srcNode) {
srcNode.stop();
srcNode = null;
play_button.value = "PLAY";
} else {
actx.resume();
playLoop(audioData);
play_button.value = "STOP";
}
};
</script>
</body>
</html>
