Kelvin Au

Live Demo: Circular Wave and Sunburst (Remember to adjust your audio first)

Visualizing the data in a dynamic and continuous way gives the real-time feeling to be in sync with the data status, especially true for audio. I was looking for a JS library for circular audio wave, which was in a form of a circular continuous line that changed when the audio frequency changed, but I couldn’t find one. There is a great list of audio visualization libraries on github called awesome-audio-visualization. I couldn’t find anything that fit my need there. Therefore, I decided to create a library for this purpose.

Recently I experienced a weird behavior of an old AngularJS directive which simply added a wrapper DOM using jQuery wrap function together with ngRepeat. Of course there are many better ways to provide the same functionality without use of jQuery, but this is not the focus of this blog. I want to show the reason behind why jQuery is not recommended to be used with AngularJS for DOM manipulation. The demo is set up on JSFiddle here.  The directive just calls ‘elem.wrap(‘<div class=”wrapper”></div>’)’ to wrap the DOM, which will make the text black; otherwise it will be in red. Then an element using this directive is rendered with ngRepeat on an object to show two texts. A button “Reset allTexts” is used to clone this object and reassign itself. Sounds easy enough and there shouldn’t be any changes after resetting the object? Try it. As you can see, the DOM structure is changed and the texts are now not inside the wrapper DOMs. What happened?