Researchers from across the globe are working on noises as a way to overcome sleep disorders - an example of which is white noise This results in a more organized project directory and takes advantage of Webpack's ability to bundle css files together with js sources.To deal with the situation, white noises are now playing a key role. For my React project, each component is a separate folder containing an index.js file and a style.css file. Previously I will have a js folder holding all my js source codes and a css folder holding all my style sheets. This time round, because I'm using Webpack with React, I experimented with a different directory structure. I had been using Browserify for my previous web projects. I experimented with React animation by setting up my components to enter and exit with transitions. Styling & TransitionĪfter setting up all the moving parts, the final step is styling the components. The trick is figuring out how to collect user credential from the URL hash returned by the login widget. This app is also my first time using Auth0 lock API. My choice of database is PouchDB on client-side syncing with a CouchDB database in the cloud. This small packet of data along with the original set of sound samples is sufficient to regenerate any mix created by the user. So instead of storing the mixed track binary, I only need to store reference to the selected sound samples and their relative volume. The simplicity of using layered sample loops is that each mix is only defined by the audio sample that went into it. Subsequent access will fetch from the local cache. First time user will retrieve audio samples over the net. However, to cut down data transfer and speed up loading of audio file, we can do better by implementing local storage for downloaded audio samples. Below is an overview of the application views structure:Īs long as internet connection is good, audio files can be served directly from the server as static resources. ![]() I used React Router to handle which components should be mounted in each view. Therefore I used howler.js to abstract away from manually implementing pause and play. Additional logic is required even for simple playback functionalities like pause and play. The problem with AudioBufferSourceNode is that it is designed to be "fired once and forget". Web audio API's native way to play a sound sample is to fire an AudioBufferSourceNode. The fun part is the player component as I get to play around with web audio. For a start, these are the components I created: The blog post Thinking in React by Pete Hunt had been a great help in getting me started: setting up the components, conceptualizing all the possible application states and figuring out which components to house these states so as to support React's one-way data-binding. The difficulty is in getting used to the React way of thinking. This is my first try at writing a React app. ![]() Therefore, with this idea of making sleep music shareable, I set out on creating Zzzz Mixer. Won't it be better if the favourite list is something made public so everyone can explore the works of everyone else? Not only can we listen to other people's work, we can also build on top of other people's work so the list keeps growing and new users have access to a potentially long list of pre-mixed themes right from the start. While being able to mix sound is a great feature to have, I realized most users probably aren't patient enough to experiment with all the available sound samples (total 52 in the paid version) and make really interesting music with them. You can then save your customized track into a favourite list. For example you can recreate a "cabin in the woods" surrounding by mixing the sound of howling wind together with rustling leaves and a ringing wind chime. The app allows you to mix your own sleep music by layering various smoothing ambient sounds and melodies into one playback loop. The idea for making this app comes from an Android app Relax Melodies which I had been using to catch some sleep during long bus trips. The objective is to make a single-page app and we are allowed to use any front-end framework. This is my 3rd project for General Assembly's Web Development Immersive. A sleep music mixer single-page app built in React.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |