JS Sequencer

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.

What does it do

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.

Dependencies

• 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.

How to install

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.git

Install the dependencies:

$ npm install

Start a local development server.

$ npm start

Start a live development server.

$ npm run live

In 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.io or https://<RANDOM_CODE>.ngrok.io.

Feature detection

HTML Audio tag.

"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.

Detection

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>'
    }

Solution

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.

Mobile detection.

In order to make this better for smaller screens a check was written.

Detection

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
}

Solution

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.

Landscape/Portrait mode detection.

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.

Detection

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
    }
})

Solution

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.

Improving the app

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.

Features - desktop

• 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

Wishlist

• Upload own audio files to play
• Mobile touch friendlier
• Record your audio

Known bugs

• Some audio files are too large - may not load fast enough

How to contribute

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.

Example

Here is a link to a live demo of the Drum kit

Author

Elton Gonçalves Gomes - checkout more of my work on github

---

Sources

• Featurelist
• IE scripts only
• AddEventListener prefix