All Projects → mikehelland → Omg Music

mikehelland / Omg Music

Licence: unlicense
Music making, remixing, and collaborating tools for the web

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Omg Music

Signal
A friendly music sequencer built with web technology
Stars: ✭ 166 (+124.32%)
Mutual labels:  music, webaudio
urmusic
An application to make your own music visualizer, easily and for free!
Stars: ✭ 52 (-29.73%)
Mutual labels:  html5-canvas, html5-audio
Tinysynth
A drums looper made with React and the WebAudio API
Stars: ✭ 238 (+221.62%)
Mutual labels:  music, webaudio
Web Drum Sequencer
A drum machine and sequencer built with the Web Audio API, React, and Redux.
Stars: ✭ 117 (+58.11%)
Mutual labels:  music, webaudio
Daw
GridSound (0.33.0) wants to be an open source online digital audio workstation following the new WebAudio API 🎛🎹🎵✨
Stars: ✭ 804 (+986.49%)
Mutual labels:  music, webaudio
Xsound
Web Audio API Library for Synthesizer, Effects, Visualization, Multi-Track Recording, Audio Streaming, Visual Audio Sprite ...
Stars: ✭ 123 (+66.22%)
Mutual labels:  music, webaudio
Audiomotion.js
High-resolution real-time spectrum analyzer and music player using Web Audio and Canvas APIs.
Stars: ✭ 177 (+139.19%)
Mutual labels:  html5-canvas, html5-audio
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: ✭ 93 (+25.68%)
Mutual labels:  music, html5-audio
Scribbletune
Create music with JavaScript
Stars: ✭ 3,509 (+4641.89%)
Mutual labels:  music, webaudio
Eternal
👾~ music, eternal ~ 👾
Stars: ✭ 323 (+336.49%)
Mutual labels:  music, webaudio
Granular
HTML5 Granular Synthesiser
Stars: ✭ 113 (+52.7%)
Mutual labels:  music, webaudio
Jssynth
Make music in your browser with this synthesizer and sequencer
Stars: ✭ 25 (-66.22%)
Mutual labels:  music, webaudio
D3 Audio Spectrum
Spectrum analysis demo using D3 and HTML5 audio
Stars: ✭ 101 (+36.49%)
Mutual labels:  music, html5-audio
Guitar Tuner
Browser-based guitar tuner
Stars: ✭ 146 (+97.3%)
Mutual labels:  music, webaudio
Cracked
Mac app for noise making - built w/ "I Dropped My Phone The Screen Cracked"
Stars: ✭ 98 (+32.43%)
Mutual labels:  music, html5-audio
I dropped my phone the screen cracked
web audio, cracked.
Stars: ✭ 245 (+231.08%)
Mutual labels:  music, html5-audio
Nokia Composer
Nokia Composer in 512 bytes
Stars: ✭ 86 (+16.22%)
Mutual labels:  music, webaudio
Beet.js
Polyrhythmic Sequencer library for Web Audio API.
Stars: ✭ 87 (+17.57%)
Mutual labels:  music, webaudio
jsrobowar
👾 A port of RoboWar to the web browser using JavaScript and HTML5. (2010)
Stars: ✭ 31 (-58.11%)
Mutual labels:  html5-canvas, html5-audio
Waveform Playlist
Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity.
Stars: ✭ 919 (+1141.89%)
Mutual labels:  music, webaudio

OMG Music

OMG Music is a "Music Context" that wraps the web browser's AudioContext.

Music created and shared in the OMG Music format contains information like key and time signatures that make the modification and mutation of beats and melodies simple.

It designed for the advancement of "open music", where music is shared in a "source code" format that promotes remixing.

This app supplies the core music functionality for the OMG Platform

OMG Song File Format

The song and its parts are a JSON file.

An overview of the file format looks like this:

 let song = {
      parts: [{name: "Piano", ...}],
      sections: [
           {
                name: "Verse",
                parts: [{name: "Piano", ...}]
           }
      ],
      beatParams: {...},
      keyParams: {...},
      name: "My Song"
 }

The song is separated "horizontally" into parts (such as piano, drums, guitar) and "vertically" into sections (such as Intro, Verse, Chorus).

The song.parts array is the part header, which contains information about how to make sounds from the part. This may contain a list of MP3 or WAV files contained in a Sound Set. Or a the part might generate sounds from Web Audio API's built in oscillators, or the WebAudioFont.

Each section in song.sections also has a parts array. This contains information about when to play each sound, producing a melody or a beat.

The parts in song.sections have either a notes array, or a tracks array.

notes Vs tracks

The notes array contains a list of objects that describe what note to play and for how long. Like this:

 notes = [
      {note: 0, scaledNote: 60, beats: 2.0},
      {rest: true, beats: 1.0},
      {note: 1, scaledNote: 62, beats: 1.0}
 ]

The scaledNote is a MIDI note determined from the key of the song and octave of the instrument of the part. In this case a middle C (MIDI note 60) is played for a two beats, then a one beat rest, then the D above it (MIDI note 62) is played for one beat.

The tracks array can contain multiple tracks (think bass drum, snare drum, high-hat). Each track is an array that contains an element for each subbeat in the current part. If the value N is a number between 0 and 1, the audio sample for that track is played at volume N. The entire audio sample is played.

Use notes when you need to determine how long an audio sample is played (such as in a melody or bassline).

Classes

THe main class is OMusicContext. This can load() songs or parts in the OMG format, or create blanks.

The OMGSong and OMGSongPart classes can be thought of as an "exo-skeleton" for the data. For example, the following data:

 let songData = {
      parts: [{name: "Piano", ...}],
      sections: [
           {
                name: "Verse",
                parts: [{name: "Piano", ...}]
           }
      ],
      beatParams: {...},
      keyParams: {...},
      name: "My Song"
 }

When loaded becomes:

 omgSong = {
      data: songData,
      parts: {
           "Piano: {data: partHeaderData}
      }
      Sections: {
           "Verse": {
                data: sectionData,
                parts: {
                     "Piano": {data: partDetailData}
                }
           }
      }
 }

The original songData still exists as omgSong.data. The parts and sections arrays of the data have been turned into objects/dictionaries. This is for easier access to parts and sections by name, which is useful when passing data through websockets and other layers.

All elements of songData can be accessed individually through these wrapper objects (OMGSong and OMGSongPart). The wrapper allows the player, and the context, and the user interfaces to attach temporary things which do not need to saved are cannot be stringified. For example, the GainNode for each part is on the OMGSongPart that wraps its the parts data.

These audio nodes needs to be associated with the part, but cannot be stringified, and need to be created for each session. So they go onto the wrapper.

Examples

Here are some apps where OMG Music is used:

Using the Client: Game Dev Example

How to: https://www.youtube.com/watch?v=TXpPFBkpXp0

(Note, the video has outdated code)

When the game is loading:

 import OMusicContext from "https://openmedia.gallery/apps/music/js/omusic.js"
 
 var music = new OMusicContext()
 var {song, player} = await music.load("http://openmusic.gallery/data/1333")

When the game starts:

 game.music.play()

Increase BPM and key when difficulty increases:

 music.beatParams.bpm += 20

 music.keyParams.rootNote++
 music.rescaleSong()

When the game ends:

 music.stop()
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].