brydavis · May 9, 2019 21:09
diff --git a/audio_array_buffer.html b/audio_array_buffer.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 </head>

 <body>


    <p>Example of using the Web Audio API to load a sound file as an ArrayBuffer, encode and decode the ArrayBuffer
        and start playing audio on user-click.</p>
    <!-- <input type="file" accept="audio/*">    -->
        <button onclick="playSound()" disabled>Start</button>
    <button onclick="stopSound()" disabled>Stop</button>
    <div>
        <p>This will be the output of a base64 string representation of your sound file.</p>
        <textarea id="encodedResult" cols="100" rows="10">
      </textarea>
    </div>


    <script>
        var context = new AudioContext();
        var source = null;
        var audioBuffer = null;
        // Converts an ArrayBuffer to base64, by converting to string 
        // and then using window.btoa' to base64. 
        var bufferToBase64 = function (buffer) {
            var bytes = new Uint8Array(buffer);
            var len = buffer.byteLength;
            var binary = "";
            for (var i = 0; i < len; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            return window.btoa(binary);
        };
        var base64ToBuffer = function (buffer) {
            var binary = window.atob(buffer);
            var buffer = new ArrayBuffer(binary.length);
            var bytes = new Uint8Array(buffer);
            for (var i = 0; i < buffer.byteLength; i++) {
                bytes[i] = binary.charCodeAt(i) & 0xFF;
            }
            return buffer;
        };

        function stopSound() {
            if (source) {
                source.stop(0);
            }
        }

        function playSound() {
            // source is global so we can call .stop() later.
            source = context.createBufferSource();
            source.buffer = audioBuffer;
            source.loop = false;
            source.connect(context.destination);
            source.start(0); // Play immediately.
        }

        function initSound(arrayBuffer) {
            var base64String = bufferToBase64(arrayBuffer);
            var audioFromString = base64ToBuffer(base64String);
            document.getElementById("encodedResult").value = base64String;
            context.decodeAudioData(audioFromString, function (buffer) {
                // audioBuffer is global to reuse the decoded audio later.
                audioBuffer = buffer;
                var buttons = document.querySelectorAll('button');
                buttons[0].disabled = false;
                buttons[1].disabled = false;
            }, function (e) {
                console.log('Error decoding file', e);
            });
        }
        // User selects file, read it as an ArrayBuffer and pass to the API.
        var fileInput = document.querySelector('input[type="file"]');
        fileInput.addEventListener('change', function (e) {
            var reader = new FileReader();
            reader.onload = function (e) {
                initSound(this.result);
            };
            reader.readAsArrayBuffer(this.files[0]);
        }, false);
        // Load file from a URL as an ArrayBuffer.
        // Example: loading via xhr2: loadSoundFile('sounds/test.mp3');
        function loadSoundFile(url) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function (e) {
                initSound(this.response); // this.response is an ArrayBuffer.
            };
            xhr.send();
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>

	<body>


	<p>Example of using the Web Audio API to load a sound file as an ArrayBuffer, encode and decode the ArrayBuffer
	and start playing audio on user-click.</p>
	<!-- <input type="file" accept="audio/*"> -->
	<button onclick="playSound()" disabled>Start</button>
	<button onclick="stopSound()" disabled>Stop</button>
	<div>
	<p>This will be the output of a base64 string representation of your sound file.</p>
	<textarea id="encodedResult" cols="100" rows="10">
	</textarea>
	</div>


	<script>
	var context = new AudioContext();
	var source = null;
	var audioBuffer = null;
	// Converts an ArrayBuffer to base64, by converting to string
	// and then using window.btoa' to base64.
	var bufferToBase64 = function (buffer) {
	var bytes = new Uint8Array(buffer);
	var len = buffer.byteLength;
	var binary = "";
	for (var i = 0; i < len; i++) {
	binary += String.fromCharCode(bytes[i]);
	}
	return window.btoa(binary);
	};
	var base64ToBuffer = function (buffer) {
	var binary = window.atob(buffer);
	var buffer = new ArrayBuffer(binary.length);
	var bytes = new Uint8Array(buffer);
	for (var i = 0; i < buffer.byteLength; i++) {
	bytes[i] = binary.charCodeAt(i) & 0xFF;
	}
	return buffer;
	};

	function stopSound() {
	if (source) {
	source.stop(0);
	}
	}

	function playSound() {
	// source is global so we can call .stop() later.
	source = context.createBufferSource();
	source.buffer = audioBuffer;
	source.loop = false;
	source.connect(context.destination);
	source.start(0); // Play immediately.
	}

	function initSound(arrayBuffer) {
	var base64String = bufferToBase64(arrayBuffer);
	var audioFromString = base64ToBuffer(base64String);
	document.getElementById("encodedResult").value = base64String;
	context.decodeAudioData(audioFromString, function (buffer) {
	// audioBuffer is global to reuse the decoded audio later.
	audioBuffer = buffer;
	var buttons = document.querySelectorAll('button');
	buttons[0].disabled = false;
	buttons[1].disabled = false;
	}, function (e) {
	console.log('Error decoding file', e);
	});
	}
	// User selects file, read it as an ArrayBuffer and pass to the API.
	var fileInput = document.querySelector('input[type="file"]');
	fileInput.addEventListener('change', function (e) {
	var reader = new FileReader();
	reader.onload = function (e) {
	initSound(this.result);
	};
	reader.readAsArrayBuffer(this.files[0]);
	}, false);
	// Load file from a URL as an ArrayBuffer.
	// Example: loading via xhr2: loadSoundFile('sounds/test.mp3');
	function loadSoundFile(url) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function (e) {
	initSound(this.response); // this.response is an ArrayBuffer.
	};
	xhr.send();
	}
	</script>
	</body>
	</html>