Computer Art - Visualize your music in JavaScript with your browser - part 1
It was the day when my friend asked me how to do the bar chart of music visualization like this:
After watching the video, I feel what an awesome work it is and make a decision writing this article to describe how to visualize your music.
There are some prerequisite skills to help you master the music visualization in JS, but you can also treat this article as the introduction to music visualization if some of these skills you ever learned. Here they are:
Prerequisite skills
- JavaScript (namely JS or ECMA Script)
- JS Chart or Graph Libraries (JS codes for generating graphs on your web browser) like one of the following libraries
* D3.js
* p5.js
* processing.js
* Raphael.js - Web Browser Technologies (such as HTML5, Audio API, Canvas, SVG)
How to learning those skills
Anytime if you want to know more about JS or learn it, I highly recommend the JS online course on Codecademy.
After finishing the JS course, you can start to read the documentation for one of those JS chart libraries (D3.js, p5.js, processing.js, Raphael.js …). And learn how to visualize your computer data (such as music, doc, image …).
There are a lot of similar implementations of JS like those libraries and find more information in this two articles [1] and [2].
Finally you learn the skills above, and you may ask me a question.
“Why are there many JS libraries to generate graphs and charts on web browser?”
The answer is “JavaScript is such a simple programming language for beginners to learn, the modern browsers recently support SVG and canvas standards and HTML is so much popular worldwide”. Now we can easily draw something complex with HTML & JS codes easily. Just feel free and take a look at CodePen. You will find a lot of amazing works drawn by web designers’ code pens.
The web browser is almost pre-installed in all personal computers. However there are few people who really know how powerful the web browser is. The following two websites are strongly recommended for you to visit.
2. The Web Platform: Browser technologies [4]
After overview of web browser, I collect some works for you, classify them to five classes, and describe their characteristic and implementing keyword below.
All Types of Music Visualization
- Bar Chart Type
* x-axis: frequency & y-axis: amplitude - Bar Chart Type 2
* x-axis: time & y-axis: frequency - Waveform / Spectrum Type
- Waveform Morphing Type
- Others
First, Bar Chart Type [5]
The reactive chart above shows the frequency in x-axis and the strength of signals (namely amplitude) in y-axis. It contains few codes, is understood easily, and programmed on three web technologies (HTML5 Audio API, Canvas, and JS).
Second, Bar Chart Type 2 [6]
This one differs from the previous one. Its x-axis represents the time, y-axis is the frequency of streaming audio data and it replaces canvas with SVG in display techniques of browser.
Third, Waveform [7] / Spectrum Type [5]
This two examples are also easy to learn and use same technologies with those mentioned by the former paragraphs. The only limit is your imagination. Give it a try contributing your example or sharing your idea to the original group or team.
Fourth, Waveform Morphing Type [8]
This visualization is a little more complex than those above because its display needs 3D renderer and WebGL technologies. Although the morphology looks like the appearance of waveform, you must learn much more the basis of computer graphics knowledge about the framework, mathematics, and settings of WebGL than previous SVG and canvas levels.
If you have interested in the virtual 3D world like VR or AR, you can study deeply in the three.js [12] library and these references and textbooks [11] assist you get involved in computer graphics quickly.
Fifth, Other two examples dancer.js [9] / party-mode [10]
The final two examples belong to the customized type and all technologies mentioned by the former cases. Any of random shapes with the rhyme, beats, and melodies excluded the former cases are all included in this type. Open your mind and just imagine what they could be. Connect your experience and imagination to be a creative designer or artist of music visualization！
I split the chapter of code work in the next article, “Computer Art — Visualize your music in JavaScript with your browser — part 2”.
I will talk more about the details of JS programming and implement my music visualization in D3.js myself in the next article “Computer Art — Visualize your music in JavaScript with your browser — part 2”.
To be continued with the part 2.
Thanks for your reading.
Reference
[1] 20 best JavaScript charting libraries, VAIBHAV SINGHAL, http://thenextweb.com/dd/2015/06/12/20-best-javascript-chart-libraries/#gref
[2] 16 JavaScript Libraries for Creating Beautiful Charts, Syed Fazle Rahman, http://www.sitepoint.com/15-best-javascript-charting-libraries/
[3] THE EVOLUTION OF THE WEB, http://www.evolutionoftheweb.com
[4] The Web platform: Browser technologies, https://platform.html5.org
[5] Exploring the HTML5 Web Audio: visualizing sound, jos.dirksen, http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound
[6] Music Visualization with D3.js, Garry Smith, https://www.bignerdranch.com/blog/music-visualization-with-d3-js/
[7] wavesurfer.js, katspaugh, http://wavesurfer-js.org
[8] Loop Waveform Visualizer, Felix Turner, https://airtightinteractive.com/demos/js/reactive/
[9] dancer.js JavaScript Audio Library, jsantell, https://github.com/jsantell/dancer.js/
[10] party-mode, preziotte, https://github.com/preziotte/party-mode
[11] Useful reference books for computer graphics, Don Fussell, fussell@cs.utexas.edu, https://www.cs.utexas.edu/users/fussell/courses/cs384g/books.shtml
[12] three.js, http://threejs.org
It is all my pleasure to write articles for my followers.
If you like this article, please feel free to follow me.
Thanks for your reading.
See you next time.