/
main.js
138 lines (113 loc) · 4.51 KB
/
main.js
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
// Notes
// https://www.kkhaydarov.com/audio-visualizer/
// https://medium.com/@duraraxbaccano/computer-art-visualize-your-music-in-javascript-with-your-browser-part-2-fa1a3b73fdc6
// Import a renderer
import Animal from './animal.js'
import circleRenderer from './radialRayMonoRenderer.js'
import circleGridRenderer from './renderCircleGrid.js'
import circleCenterRenderer from './renderCircleCenter.js'
import verticalBarsRenderer from './verticalBarRenderer.js'
import verticalBarsMonoRenderer from './verticalBarsMonoRenderer.js'
import radialRayRenderer from './radialRayRenderer.js'
// --------------------------------------------------------
// Canvas
// Get reference to the canvas context for use by the
// renderers below
const background = document.getElementById('background')
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// ----------------------------------------------------------
// Buttons
const select = document.getElementById('select')
const customSound = document.getElementById('custom-sound')
const clearFile = document.getElementById('clear-file')
const playButton = document.getElementById('button-play')
const pauseButton = document.getElementById('button-pause')
clearFile.addEventListener('click', (e) => {
customSound.value = null
})
playButton.addEventListener('click', (e) => {
startAudio()
})
pauseButton.addEventListener('click', (e) => {
audio.pause()
})
// --------------------------------------------------------
// Audio setup
// Define some variables
let analyser
let frequencyArray
let audio
// Starts playing the audio
function startAudio() {
// make a new Audio Object
audio = new Audio()
// Get a context
const audioContext = new(window.AudioContext || window.webkitAudioContext)()
// Define a source sound file
let animal = ""
console.log()
if (customSound.value === "") {
animal = select.value;
if (animal === "Bird") {
audio.src = './bird.wav'
} else if (animal === "Dog") {
audio.src = './dog.wav'
} else if (animal === "Hyena") {
audio.src = './hyena.wav'
} else if (animal === "Monke") {
audio.src = './monke.wav'
} else {
audio.src = './fox.wav'
}
} else {
var fileReader = new FileReader();
fileReader.readAsDataURL(customSound.files[0]);
fileReader.onload = function(e) {
audio.src = e.target.result
console.log(("Filename: '" + customSound.files[0].name + "'"), ( "(" + ((Math.floor(customSound.files[0].size/1024/1024*100))/100) + " MB)" ));
}
}
// Make a new analyser
analyser = audioContext.createAnalyser()
// Connect the analyser and the audio
const source = audioContext.createMediaElementSource(audio)
source.connect(analyser)
analyser.connect(audioContext.destination)
// Get an array of audio data from the analyser
frequencyArray = new Uint8Array(analyser.frequencyBinCount)
// console.log(frequencyArray.length)
// Start playing the audio
audio.play()
requestAnimationFrame(render)
}
// This function renders the audio to the canvas using a renderer
function render() {
const centerX = 495 / 2
const centerY = 500 / 2
const radius = 500 / 5
analyser.getByteFrequencyData(frequencyArray)
let animal = select.value
if (animal === "Bird") {
background.style.backgroundImage = "url('https://images8.alphacoders.com/461/461755.jpg')"
} else if (animal === "Dog") {
background.style.backgroundImage = "url('https://image.freepik.com/free-photo/pomeranian-dog-with-yellow-background_63176-591.jpg')"
} else if (animal === "Hyena") {
background.style.backgroundImage = "url('https://www.fieldmuseum.org/sites/default/files/styles/3x2_1400w/public/jwarchall/2018/05/21/gn92214_007ad-photoarchives_webexport_0.jpg?itok=7h9on2zB')"
} else if (animal === "Monke") {
background.style.backgroundImage = "url('https://www.wallpapertip.com/wmimgs/177-1771723_monkey-background-hd-wallpapers-background-images-hd-animals.jpg')"
} else {
background.style.backgroundImage = "url('https://eskipaper.com/images/fox-wallpaper-15.jpg')"
}
background.style.backgroundSize = "cover"
Animal(frequencyArray, ctx, centerX, centerY, radius, animal)
// Use one of the renderers below
// radialRayRenderer(frequencyArray, ctx, centerX, centerY, radius)
// verticalBarsMonoRenderer(frequencyArray, ctx, 12, 300, 300)
// verticalBarsRenderer(frequencyArray, ctx, 300, 300)
// circleCenterRenderer(frequencyArray, ctx, centerX, centerY)
// circleGridRenderer(frequencyArray, ctx, 300, 300)
// circleRenderer(frequencyArray, ctx, centerX, centerY, radius)
// Set up the next animation frame
requestAnimationFrame(render)
}