/
index.html
120 lines (91 loc) · 3.31 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
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Web Audio Basics</title>
<meta name="description" content="IIR Filter Demo for Web Audio API">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="boombox">
<div class="boombox-handle"></div>
<div class="boombox-body">
<section class="master-controls">
<input type="range" id="volume" class="control-volume" min="0" max="2" value="1" list="gain-vals" step="0.01" data-action="volume" />
<datalist id="gain-vals">
<option value="0" label="min">
<option value="2" label="max">
</datalist>
<label for="volume">VOL</label>
<input type="range" id="panner" class="control-panner" list="pan-vals" min="-1" max="1" value="0" step="0.01" data-action="panner" />
<datalist id="pan-vals">
<option value="-1" label="left">
<option value="1" label="right">
</datalist>
<label for="panner">PAN</label>
<button class="control-power" role="switch" aria-checked="false" data-power="on">
<span>On/Off</span>
</button>
</section>
<section class="tape">
<audio src="outfoxing.mp3" crossorigin="anonymous" ></audio>
<!-- type="audio/mpeg" -->
<button data-playing="false" class="tape-controls-play" role="switch" aria-checked="false">
<span>Play/Pause</span>
</button>
</section>
</div><!-- boombox-body -->
</div>
<script type="text/javascript">
console.clear();
// instigate our audio context
// for cross browser
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
// load some sound
const audioElement = document.querySelector('audio');
const track = audioCtx.createMediaElementSource(audioElement);
const playButton = document.querySelector('.tape-controls-play');
// play pause audio
playButton.addEventListener('click', function() {
// check if context is in suspended state (autoplay policy)
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
if (this.dataset.playing === 'false') {
audioElement.play();
this.dataset.playing = 'true';
// if track is playing pause it
} else if (this.dataset.playing === 'true') {
audioElement.pause();
this.dataset.playing = 'false';
}
let state = this.getAttribute('aria-checked') === "true" ? true : false;
this.setAttribute( 'aria-checked', state ? "false" : "true" );
}, false);
// if track ends
audioElement.addEventListener('ended', () => {
playButton.dataset.playing = 'false';
playButton.setAttribute( "aria-checked", "false" );
}, false);
// volume
const gainNode = audioCtx.createGain();
const volumeControl = document.querySelector('[data-action="volume"]');
volumeControl.addEventListener('input', function() {
gainNode.gain.value = this.value;
}, false);
// panning
const pannerOptions = {pan: 0};
const panner = new StereoPannerNode(audioCtx, pannerOptions);
const pannerControl = document.querySelector('[data-action="panner"]');
pannerControl.addEventListener('input', function() {
panner.pan.value = this.value;
}, false);
// connect our graph
track.connect(gainNode).connect(panner).connect(audioCtx.destination);
// Track credit: Outfoxing the Fox by Kevin MacLeod under Creative Commons
</script>
</body>
</html>