-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex.html
103 lines (93 loc) · 3.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<!-- Author: Dian Dimitrov -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Web Audio API: Converting audio files from and to base64 string</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="mp3String" 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("mp3String").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>