Giter Site home page Giter Site logo

loopa's Introduction

Loopa

Netlify Status

This project aimed at developing a web app about Audio Loopstation with Effects and Filters. People can use it to create their music with streamed media as input.

The project is inspired by the lectures about Web Audio API, Audio Filters and Effects. Our idea is to provide platforms for users to record audio in multiple tracks for looping and combining them into music. With Loopa, we can provide a cross platform and user-friendly experience.

Loopa is created by HTML, CSS and Javascript. Some with popular framework like Tone.js, and libraries like Recorder.js, RecordRTC.js and Glider.js are imported for web audio and user interface.

This course project is in collaboration with @WadeHo. Check out Loopa to start creating your music.

Loopa Mockup Fig 1.1, Showcase of Loopa

How we get Inspired

There are few similar apps on the market. For instance, Loopy HD: Looper.

However, we mixed their features together and provided real time audio mixing on the browser, to make it clear, it is cross-platform supported. We also provided an user-friendly design which is also a neat and clean design for Loopa.

Features

  • Unlimited Loopers
  • Effects and filters
  • Cross-Platform
  • Master output to .wav files

Methodologies

There is an instruction guide inside the menu of our app to showcase how our app works. Here, we will focus on the part that is related to the functions that manipulate the web audio.

Tone.js

We make use of Tone.js as the web audio framework. It is a relatively comprehensive framework of web audio so that I can use it for different purposes in our project. Player In this project, we utilized the Player provided in Tone.js to play the audio files.

const metronomeSound = new Tone.Player("audio/metronome.mp3").toDestination();

Transport

Also, we have used the Transport for timing musical events for the loopers. For the metronome, There is a repeating function called repeat. This function will be called every quarter-note. Index will keep increasing per beats and modulus by 4 to reset to zero.

function transport() {
  const metronomeSound = new Tone.Player("audio/metronome.mp3").toDestination() 
  Tone.Transport.bpm.value = bpm;
  let index = 0;
  Tone.Transport.scheduleRepeat(repeat, '4n');
  function repeat(time) {   
    let step = index % 4;
    metronomeSound.start();
    index++;
  }
}

Audio Nodes, Effects

As you can see, we provided options for users to control the filters and effects etc… The principle behind was adding nodes between the source and the destination. Tone.js provided different components for that.

Here, we take Volume as an example. We first get all the HTML elements of the range inputs in all the loopers. Then we create the audio node( Tone.Volume ) and the event listener to change the value when users input for each of them when they are newly created.

function setupMainLooper() {
    // Volume Control for Individual Looper
    const volControls = document.querySelectorAll('.main .vol-control');
    volControls.forEach((volControl, index) => {
        if (index >= glider.slides.length - 2) {
            volNodes[index] = new Tone.Volume(-20);
            volControl.addEventListener('input', () => {            
                volNodes[index].volume.value = volControl.value;
                if(volControl.value == -30){
                    volNodes[index].mute=true;
                }
            })
        }
    })
}

Chain

After we created different audio nodes for, we have to connect them between the audio source and the destination. Chain let us connect them in series. We first connect the Source -> Filters -> Effects -> Other Audio Nodes -> Destination

recordings[i].chain(LPFNodes[i], HPFNodes[i], revNodes[i], panNodes[i], volNodes[i], Tone.Destination).start("+" + (recordingsOffset[i] % (Tone.Ticks("4n").toTicks() * 4) - 40) + "i");  

Audio Recording

We make use of the library Recorder.js for getting user’s media (e.g microphone, virtual/ physical instrument audio input). Then we grab the url of blob created after recording and store in the Player in recordings array, which store the recorded audio to loop for each loopers

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
audioContext = new AudioContext();
gumStream = stream;
input = audioContext.createMediaStreamSource(stream);
}
function createDownloadLink(blob) {
   var url = URL.createObjectURL(blob);
   recordings[recordingsIndex] = new Tone.Player(url);
}

Due to the lack of maintenance and functionality of Recorder.js, we also used another library called RecordRTC.js. We use it for the recording on the master output ( The output of loopers ) and output to a .wav file.

const audio = document.querySelector(".master-download");
const audioContextforMainRecord = Tone.context;
const dest = audioContextforMainRecord.createMediaStreamDestination();
let masterRecorder = RecordRTC(dest.stream, {
    type: 'audio',
    mimeType: 'audio/wav',
    recorderType: StereoAudioRecorder,
    disableLogs: true
})

Chain them to the destination we created for RecordRTC recordings[i].chain(LPFNodes[i], HPFNodes[i], revNodes[i], panNodes[i], volNodes[i], dest);

function stopMasterRecording() {
    masterRecorder.stopRecording( ()=> {
        let blob = masterRecorder.getBlob();
        audio.href = URL.createObjectURL(blob)
        audio.download = "loopa_master.wav"
    });
}

Looping Algorithm

Here we are going to introduce the most important part of our program, the looping. We tried many algorithms for this and eventually we came up with a working solution. However, we believed that it is not the best solution but it is what we can achieve in this limited time.

As there is a timing unit called Ticks in Tone.js when Transport is running, we try to save the offset ticks in transport when we start recording, and check every ticks for an interval of 4 bars. And we playback the audio when it matches.

setInterval(() => {
  if (Math.abs(Tone.Transport.ticks % (Tone.Ticks("4n").toTicks() * looperBars[i]) - recordingsTime[i] % (Tone.Ticks("4n").toTicks() * 4)) < 3)
    try {
      recordings[i].start();
    } catch {
      console.log("Require input recordings for Loop 1");
    }

However, this method requires too many calls in every tick and it causes the browser to start lagging and we think it is not a good method and there are some accuracy issues too. So, we end up changed to another approach that is using the delay start time of start() of Player.

When the first beat of a bar is hitted (step = 0), we will perform a check for every loopers if it reaches its loopbars (loopbars means the interval of bars that it will start looping again, e.g. for looping 4 beats, the interval of bars is one )

Just like the previous approach, we will save the offset of ticks. But this time, we will make the audio to start playing with that offset modulus the ticks of a bar (-40 for fixing the delay) "+" + (recordingsOffset[i] % (Tone.Ticks("4n").toTicks() * 4) - 40) + "i"

Here is the complete code of the corresponding section.

if (step == 0 ) {
  // Counting the remaining loops for each loopers
  for (i = 0; i < glider.slides.length - 1; i++) {
    loopBarsCount[i]++;
    loopBarsCount[i] %= loopBars[i];
  }

  for (i = 0; i < glider.slides.length - 1; i++ ){
    try {
      if (loopBarsCount[i] == 0) {
        recordings[i].chain(LPFNodes[i], HPFNodes[i], revNodes[i], panNodes[i], volNodes[i], Tone.Destination).start("+" + (recordingsOffset[i] % (Tone.Ticks("4n").toTicks() * 4) - 40) + "i");  
      }                  
    }                
  }
}

User Interface Design

This part is not really related to the course so we will just briefly introduce our approach on this. We used a Javascript library called glider.js for the carousel. It allowed multiple loopers to stay/ hide on the screen responsively when the screen is shrunk.

loopa-screenshot-with-gliderjs Fig 1.3, Screenshot of Loopa with glider.js

We also allowed users to create as many loopers as they want. Therefore, we cannot hard code the HTML and Javascript for the loopers. We have to create a new set of elements when a new looper is created.

loopa's People

Contributors

iammrandrew avatar poolp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

poolp

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.