-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (88 loc) · 3.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Audio Visualiser</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
#visualizer {
border: 1px solid #ccc;
width: 100%;
height: 300px;
margin-top: 20px;
}
.button-group {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Simple audio visualiser</h1>
<div id="app">
<button id="record-mic-btn">Record Microphone</button>
<input type="file" id="audioFile" accept="audio/*"/>
<audio id="audioPlayer" controls></audio>
<div class="button-group">
<button id="mode-bar">Simplest</button>
<button id="mode-wave">Wavey</button>
<button id="mode-brightness">Brightness</button>
<button id="mode-chroma">Chroma</button>
<button id="mode-loudness">Loudness</button>
</div>
<canvas id="visualizer"></canvas>
</div>
<div class="how-it-works">
<h2>How it works</h2>
<section>
<h4>Web Audio, Meyda, 2d Canvas</h4>
<code><pre>
// on play the audio that has been loaded
audioPlayer.onplay = () => {
// get a new AudioContext
const audioCtx = new AudioContext();
// get a source of the audio
const source = audioCtx.createMediaElementSource(audioPlayer);
// output the audio to the speakers
source.connect(audioCtx.destination);
// analyse the audio features with Meyda
const analyzer = Meyda.createMeydaAnalyzer({
audioContext: audioCtx,
source: source,
bufferSize: 512,
// in our case, <a rel="noopener noreferrer" target="_blank" href="https://meyda.js.org/audio-features.html#:~:text=Time%2Ddomain%20features-,RMS,-rms">rms</a>, the root mean square of the waveform
// and <a rel="noopener noreferrer" target="_blank" href="https://meyda.js.org/audio-features.html#:~:text=Spectral%20Features-,AmplitudeSpectrum,-amplitudeSpectrum">amplitudeSpectrum</a>
featureExtractors: ['rms', 'amplitudeSpectrum'],
callback: drawAudio
});
analyzer.start();
};</pre></code>
<p>In the above code the audio stream comes from the user microphone.</p>
<p>It extracts some audio features using Meyda, and draws them to a 2d canvas.</p>
<code><pre>
// the bar mode drawing is fairly simple:
function drawBar(rms) {
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
const height = rms * canvas.height/2;
const y = canvas.height / 2 - height / 2;
ctx.fillStyle = '#558822';
ctx.fillRect(0, y, canvas.width, height);
}
</pre></code>
<p>Here the bar mode drawing code is shown. It only takes into account rms.</p>
<p>Thanks for playing with this simple audio visualiser and learning a little about it.</p>
</section>
</div>
<footer>Made by George O. E. Campbell <br/><a href="https://georgecampbell.co.uk">Visit portfolio</a></footer>
<script type="module" src="/main.js"></script>
</body>
</html>