JS Sequencer is an interactive sound board. This project was build to illustrate the capabilities of a web browser. The project starts as basic html and uses browser technology to add layers of enhancements.
It allows users to make beats made out of 8 type of instruments. The app allows users to interact and gives feedback based on a set of feature.
- A basic server: Nodejs
- A Nodejs framework: Express
- Handlebars as serverside templating engine (Not needed and will be removed).
- Gulp to bundle and compile SCSS.
- Vanilla JS.
- CSS.
In order to run the application you'll need to have a version of Node and NPM installed on your computer.
First clone this repo with:
$ git clone https://github.com/eltongonc/js-sequencer.gitInstall the dependencies:
$ npm installStart a local development server.
$ npm startStart a live development server.
$ npm run liveIn order to use the live development server, a local development must be running.
- Visit the app in the browser locally on
localhost:5000. - Visit the app in the browser on other devices with a random generated link with the live development server on
http://<RANDOM_CODE>.ngrok.ioorhttps://<RANDOM_CODE>.ngrok.io.
"Method of playing sound on webpages (without requiring a plug-in)" - Can I Use.com.
While being supported on most browser there are still browsers that do not support the Audio tag. Internet Explorer 8 being one of them.
I tried to give Internet Explorer 8 and lower users a similar experience. This was a hard challenge because the audio tag would have to converted in to a flash player. A fallback solution would be something like this:
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mp3">
<object data="mediaplayer.swf?audio=audio.mp3">
<param name="movie" value="mediaplayer.swf?audio=audio.mp3">
<p>Your browser does not support native audio or Flash, but you can <a href="audio.mp3">download this MP3</a> to listen on your device.</p>
</object>
</audio>by doing this I noticed that there where still cases where it did not work. So I ended up with this with a Javascript check:
if ("Audio" in window) {
console.log("Audio supported");
}else {
document.body.innerHTML =
'<section id="pop-up"><h1>Your browser doesn\'t support HTML Audio</h2><div class="container"><h3 class="title">Here is an inspirational video of what can be done with HTML audio elements</h3><video class="content" width="560" height="315" controls="controls"><source src="/video/video.mp4" type="video/mp4" /><p>The source didn\'t load. You should try viewing this page on another web browser. I recommend <a href="https://www.google.nl/chrome/browser/desktop/">Google Chrome</a></p></video></div></section>'
}As a solution I chose to give the user an embedded Youtube video of sequencer which inspired me to make this project. If this embedded video is not supported, the user will receive a link to a recommended browser to help the web-development community.
In order to make this better for smaller screens a check was written.
I tried to give mobile users a similar experience by removing options that are not used in mobile devices:
function detectMobileile() {
// on onoe of the mobile os browsers
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
// or screens smaller than a breakpoint
|| window.innerWidth < 600){ return true;}
else { return false;}
}this check returns either true or false, and lets me do mobile specific functions:
if(detectMobileile()){
// use mobile functions
}I chose to do this check with Javascript instead of CSS, because it gives me much more flexibility. And it also opens doors to new features in the future.
Because of the layout of the app, holding it in portrait mode would make harder to use it, so a check is made to detect whether the mobile devices is being held in Landscape mode.
I tried to give mobile users a similar experience by removing options that are not used in mobile devices:
if(window.innerHeight > window.innerWidth){
// give user feedforward
}After the user does what you've asked him to, reward him:
window.addEventListener('resize',function(){
// notice the switch
if (window.innerWidth > window.innerHeight) {
// user gets feedback
}
})Same as the mobile detection, this also helps in Progressive enhancement of this app. Leaving room for expansions in the future versions. This might not be the ultimate solution, but it gets the job well done.
A lot love and though have been put to this app, but there are still a lot that can be added or be done better. Here is an overview of features, wishes and know bugs.
- Input via keyboard keys
- Row 1: 1 2 3 4 5 6 7 8
- Row 2: q w e r t y u i
- Row 3: a s d f g h j k
- Row 4: z x c v b n m ,
- Row 5: SHIFT + 1 2 3 4 5 6 7 8
- Row 6: SHIFT + q w e r t y u i
- Row 7: SHIFT + a s d f g h j k
- Metronome and sequencer
- Mouse click toggles instrument on/off
- On click mode the user can play freely
- Users can change the bpm speed
- Upload own audio files to play
- Mobile touch friendlier
- Record your audio
- Some audio files are too large - may not load fast enough
You can help improve this project by sharing your expertise and tips, as well as learn from others. Contributions of all kinds are welcome: reporting issues, updating documentation, fixing bugs, building examples, sharing projects, and any other tips that may me improve my code.
Here is a link to a live demo of the Drum kit
Elton Gonçalves Gomes - checkout more of my work on github