forked from 72lions/PlayingChunkedMP3-WebAudioAPI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (99 loc) · 3.83 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Web Audio API - Playing a chunked mp3 file</title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
text-align: center;
}
body {
border-top: 3px solid #f02311;
text-shadow: 0 1px #fff;
font-family: Arial;
font-size: 13px;
background-image: url('http://72lions.com/assets/images/stripe_e7eb00fc0caa9bf17359f52ecb7f3416.png');
}
a:link, a:visited {
color: #f02311;
}
#logo {
position: fixed;
top: 25px;
left: 24px;
z-index: 1000;
}
#visualiser {
display: inline-block;
border-bottom: 1px solid white;
}
#description, #log {
display: inline-block;
width: 1024px;
text-align: left;
}
#log {
max-height: 197px;
overflow: scroll;
}
#error {
font-size: 24px;
font-weight: bold;
padding: 80px 20px 20px 20px;
}
</style>
</head>
<body>
<canvas id="visualiser"></canvas>
<div id="description">
<p>
In this proof of concept <b>(currently only tested and working in Chrome 24+)</b> I've split the mp3 in 25 parts by using the unix split command.
The moment the first part is loaded then the playback starts immediately and it loads the second part.
When the second part is loaded then I create a new AudioBuffer by combining the old and the new,
and I change the buffer of the AudioSourceNode with the new one. At that point I start playing again
from the new AudioBuffer.
<br/><br/>
A lot of thanks to Paul (<a href="http://twitter.com/aerotwist" title="Paul Lewis on Twitter" target="_blank">@aerotwist</a>) for his suggestions and to Theo for letting me use his awesome track <a href="https://soundcloud.com/theokouroumlis/breathe-in" title="Theo Kouroumlis - Breathe In" target="_blank">Breathe In</a>.
</p>
<p><b><a href="http://72lions.com/download.php?file=WebAudioAPI_Playing_Chunked_MP3s%2FWebAudioAPI_Playing_Chunked_MP3s.zip" title="Download WebAudio API Playing Chunked MP3" target="blank">Download source</a></b> or see the progject on <b><a href="https://github.com/72lions/PlayingChunkedMP3-WebAudioAPI" title="Github - Playing a chunked MP3 with the Web Audio API" target="_blank">Github</a></b></p>
Debug:
</div>
<pre id="log"></pre>
<script type="text/javascript" src="eventtarget.js"></script>
<script type="text/javascript" src="mp3chunksplayer.js"></script>
<script type="text/javascript" src="visualiser.js"></script>
<script type="text/javascript">
if (!window.requestAnimationFrame) {
document.body.innerHTML ='<div id="error">I\'m sorry but you need Chrome 24+</div>';
} else {
// On window load initialize the class
window.addEventListener('load',function() {
var log = document.getElementById('log');
var vis = new Visualiser('visualiser').init();
var pl = new MP3ChunksPlayer().init();
var _onMessage = function(event) {
log.innerHTML = event.params.join(' ') + '<br/>' + log.innerHTML;
};
var _onPlay = function() {
vis.draw(pl.getVisualisationData());
requestAnimationFrame(_onPlay);
};
pl.bind('play', _onPlay);
pl.bind('message', _onMessage);
}, false);
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3983098-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>