gridsound/daw

GridSound (0.44.0) wants to be an open source online digital audio workstation following the new WebAudio API 🎛🎹🎵✨ -- If you can, please sponsor us a little on our Patreon ❤️

GridSound

GridSound is a work-in-progress open-source digital audio workstation developed with HTML5 and more precisely with the new Web Audio API. The application can be used at gridsound.com/daw it's also possible to create an account on gridsound.com to save your compositions online to retrieve them from anywhere at any time.

Some links : Help • Changelog • Previous versions

Follow us on Twitter or Facebook to have the latest news related to the product.

screenshot of the 0.40.0 version

daw's Issues

Is this fully functional?

Hi, we followed all the steps in your "How to build" guide, however, the blocks can be added but they can't be moved around, the play button isn't working etc.

Just wondering if it is still working, or if the changes to the components have broken it.

Great work btw! Would like to join your slack too 👍

Make gridsound as a singing synthesis editer

I want to make gridsound as a singing synthesis editer GUI
but i can not format the index.html
Once I format it
It’s wrong
How can i fix it or have some idea for it
Many thanks

How to connect a drums pattern to a channel?

Please add mix channel on drum

Is it possible to use .wav sample in piano roll?

I tried playing around GridSound and use audio samples as instrument but looks like currently we can only add the sample to the timeline? Am I missing something? Thank you! :)

If you are interested by contributing you are welcome to tell us here, in the comments :)

Feel free to tell us what you think of the project or you can share your ideas, you can ask what you can code (if you want to contribute of course) :)

Ability to render to different audio codecs

WAV is great cause it's uncompressed and can be converted to any other format, but it would be pretty nice to bounce directly to a smaller format like MP3 or AAC.

EDIT: impossible to reload a composition if there is no pattern of type keys

Hello,

a very interesting application !

I would like to point out some problems about the new "Drag and Drop raw file" feature

• Copyrighted music cannot be streamed

• "Export to Json" feature does not work in presence of raw files

How to import samples?

Is it possible to import sound sample?

You can resize panels to where you can no longer reach them

On the sidebar, you can lose the bottom panel by resizing things too far.

Idées générales à rajouter dans la todolist

Outils

• Avoir un métronome, essentiel pour s'enregistrer en étant dans la mesure.
• Gérer le protocole MIDI en entrée (pouvoir recevoir des informations depuis un clavier usb/midi) et en sortie (pouvoir envoyer des informations midi à son appareil usb/midi).
• Avoir au moins un plugin de génération de sons synthétiques (sur la base d'un ajout de signaux sortis d'oscillateurs).
• Avoir au moins les plugins suivant : EQ, Compresseur, Reverb, Délai.

Améliorations UI

• Afficher les mesures en plus du temps (avec un affichage h:m:s.ms - Mesure)
• Permettre la gestion du panoramique (mettre un son plus à droite ou plus à gauche)
• Permettre de baisser ou monter le son d'un clip (mettre un son plus fort ou moins fort).
• Permettre de modifier la signature rythmique de tout le morceau, actuellement le 4/4 est obligatoire alors qu'il y a beaucoup de morceaux en 3/4.
• Permettre de modifier la signature rythmique dans le morceau (démarrer 16 mesures en 4/4 puis avoir un break de 1 mesure en 2/4).
• Ajouter un didacticiel ou page d'aide sur les différentes fonctionnalités.
• Permettre d'avoir ses propres raccourcis pour réaliser les actions.
• Gérer des groupes de pistes (pouvoir regrouper différentes prises de voix).
• Mettre une icône et une couleur sur chaque piste pour les différencier.
• Décider du nombre de pistes présentes dans le morceau, actuellement il y en a 43, est-ce vraiment utile? Le mieux serait de pouvoir choisir.
  En général dans un petit morceau (rock ou électro) il y a 14 pistes minimum:
  • Basse.
  • Instrument rythmique mélodique (guitare rythmique et/ou piano).
  • Instrument lead (guitare solo, etc.).
  • Voix lead (chant principal).
  • backing (voix de fond).
  • Batterie (ou rythme) qui peut être éclatée en 9 sous-pistes:
    • 1 Grosse caisse
    • 1 Caisse claire
    • 1 Charlestone
    • 2 Cymbales Crash
    • 1 Cymbale Ride
    • 1 Tom Aigu
    • 1 Tom Médium
    • 1 Tom Grave

Enregistrement et export

• Pouvoir sauvegarder et reprendre une composition.
• Permettre d'enregistrer de l'audio en temps réel via le micro du PC ou un interface audio.
• Pouvoir définir un nombre de mesure totale pour le composition.
• Pouvoir exporter la composition en WAV AIFF MP3 Ogg Vorbis.

---

• Gestion des utilisateurs
  • Gérer une bibliothèque de samples.
  • Avoir une liste des compositions enregistrées.
• Collaboration sur une même composition
  • Permettre de modifier à plusieurs en même temps la même composition (le logiciel OhmStudio propose cette fonctionnalité).

Merci à Patrick-André MARENDAT pour ce retour 👍

A few UX stuff

• Zoom should not be the basic behaviour for the mouse scroll. A modifier like CTRL should be applied
• Space is generally a shortcut to play/pause in DAWs

Select a pattern

Hi guys,

To select a pattern actually we have to double click it either in the left side or in the top side.
I suggest we could click once on the top border of the pattern (red on the screenshot) and keep it like that for the green part.

It would be more intuitive for sure, I had some troubles changing patterns as it is actually.

Keep up the great work !

Recording using device Mic

Hello, I'd like to edit your fantastic software and be able to record a track using the microphone of your own device. Have you already explored this possibility? Do you see any problems or do you have any suggestions to start developing in this direction? Maybe using some ready-made library like webrtc or something similar...
thank you,
ciao
Marco

Unauthorized Distribution is Against the Law

When you place a box like "Drag and Drop raw file" that can allow any user to put whatever he wants inside a streaming flow in Internet, there are some aspects to consider related to security and copyright law, to avoid a "risk" content.

• Copyright law protects the value of a creative work made by an artist.

• Federal law provides severe civil and criminal penalties for the unauthorized reproduction, distribution, rental or digital transmission of copyrighted sound recordings. (Title 17, United States Code, Sections 501 and 506).

• Regardless of the format at issue, the same basic principle applies: music sound recordings may not be copied or distributed without the permission of the owner.

• You can record your voice to stream any kind of outlaw message without chance to stop it.

Alt key commands on mac

For some reason, when I try to use the alt key commands on mac they never work, even though my alt key works doing anything else. All of the commands that read "Ctrl/Alt" work if I use the control key, but never if I use the alt key. On my pc I don't have this issue, and I'm using chrome on both computers. Even when I tried plugging in a separate pc-layout keyboard into my mac, the commands still couldn't be read. Any reason this could be?

Mixer

Awesome project!

Are there any plans to add a mixer like:
http://kevvv.in/mix/
https://github.com/kevincennis/Mix.js

Question: Reason behind spinning up a new UI framework

Has there been specific needs or other reasons on why you decided to create a new UI framework from scratch rather then using something like VueJS or React that already provide a lot of functionality by third party packages (like windowing)?

The only reason I could think of would have been performance, seeing that a lot of the code is written in an "older-styled" way. I am just curious :)

Have a great day!

Last version is broken (Uncaught TypeError: Cannot read property 'content' of null)

I have downloaded the last source, after installing all dependencies and running the app, I got this error:

e.appendChild(document.importNode(gsuiToggle.template.content,!0)),e.r

Add a "rendering" popup, to manage all the rendering process with a progress-bar

Cursors for panel resizing

CSS cursors should make the app feel more solid, making the act of resizing panes more familiar.

MDN docs with cursor value previews

I'd go with ew-resize (horizontal) and ns-resize (vertical).
There's also col-resize and row-resize, but they don't look as good on Windows, and it sounds like semantically they're intended for tables, like resizing column headers.

---

Oh yeah, and if you just apply the cursor to the resizer element, it'll have a problem where it'll flicker between cursors as the resizer element catches up with the cursor, and lags behind, alternately.
So what you can do is add a class to the body on mousedown and remove it on mouseup.
with e.g. .horizontal-resize * { pointer: ew-resize !important }

Or another option, that I'm just thinking of now, might be to add a pseudo element to the resizer on :active that's position: absolute and fills the whole page. That'd be a fun way to do it!
But um, the other way is probably more practical.

setCapture would be helpful if it had decent browser support.

Switch from Make to a Native JS build tool

I'd like to propose a switch from the make script to a native JS build tool in order to be platform independent. Before I begin any work on it, I wanted to get your thoughts on it and see if there is a build tool you guys would lean towards?

Wavetables synthesis

The related issue on the webaudio's repo WebAudio/web-audio-api#1647

Here a screenshot of the Serum's wavetable feature to explain what is it (there are 6 wavetables below) :

Composition save format

For now, here are the composition informations we save.

{
 bpm: int,
 files: [ { name: string, size: int, type: string }, ... ],
 tracks: [ { id: int, isOn: bool }, ... ],
 samples: [ { uifile: string, duration: float, offset: float, when: float }, ... ]
}

Some informations are missing like filters.
We have to think about how we will save it and the webaudio nodes.
But for now it's not a problem since we don't use filters yet.

Here's an example:

{
 "bpm": 120,
 "files": [
  {
   "name": "128bpm - buffalonugaluss-blerg-bass.wav",
   "size": 2646178,
   "type": "audio/wav"
  },
  {
   "name": "140 bpm - siknoiz-the-water.wav",
   "size": 604948,
   "type": "audio/wav"
  },
  {
   "name": "150bpm - corruptionedm-another-generic-dubstep-beat.wav",
   "size": 1129138,
   "type": "audio/wav"
  }
 ],
 "tracks": [
  {
   "id": 0,
   "name": "Bass",
   "isOn": true
  },
  {
   "id": 1,
   "name": "Water",
   "isOn": true
  },
  {
   "id": 2,
   "name": "Beat",
   "isOn": true
  }
 ],
 "samples": [
  {
   "uifile": "128bpm - buffalonugaluss-blerg-bass.wav",
   "duration": 4.25,
   "offset": 10.75,
   "when": 1
  },
  {
   "uifile": "140 bpm - siknoiz-the-water.wav",
   "duration": 6.857142857142857,
   "offset": 0,
   "when": 0
  },
  {
   "uifile": "150bpm - corruptionedm-another-generic-dubstep-beat.wav",
   "duration": 6.4,
   "offset": 1.5,
   "when": 2
  }
 ]
}

Tracks area and piano roll resizers still have no cursor

Do they use a different implementation? If so, why?

Playback continues while playhead stops/disappears

This ones a bit hard to explain, so I've included a video: https://www.youtube.com/watch?v=EbmQCNS8vt4

For certain sound files the playhead stops as if its reached the end of the workspace, but the audio is still played.

Sound files used: soundfiles.zip

Midi Support

Seems like it should be a crucial feature for any DAW

Ctrl+Z and Ctrl+Shift+Z

Ctrl+Z should undo and Ctrl+Shift+Z should redo, on Windows and Linuxes.

If you're worried about conflicting with native browser undo/redo, well, you can defer to the default behavior if any text field is focused and preventDefault() otherwise.

If you're concerned with consistency between shortcuts, with Ctrl+N being unusable in some (maybe all or most) browsers, you could support both Ctrl and Alt+[Shift+]Z.

Also, I would support Ctrl+Y for redo, as many Windows users are used to.

Is it possible to integrate discord into the daw to help new users in the future

Integrate with Tiki and enhance synth/effects

Dear, why don't you integrate synths from Wad (https://github.com/rserota/wad) and effects from Tuna (https://github.com/Theodeus/tuna)?
Then, what about integrating this with tiki (https://tiki.org/HomePage)?

Release tags?

Hi, I'd like to list this project on https://libreav.org/updates but there are no git tags to appear in the /releases.atom feed. Might it be possible for those to be used?

the items doen't stick in any track than first in composition

when I try to move a key or drum, they don't stick anywhere but on first track... (using browser based DAW and latest version)

History Ergonomy and ShortCuts

Hey,

I was trying to use shortcuts on Windows, but it didn't work.
So far, the only manipulations that worked for me was :

• Shift + Click - Select elements
• Alt + Click - Drag patterns vertically and horizontally
• Ctrl + Scroll In/Out - Zoom In/Out

Ctrl+Z, Ctrl+Shift+Z, Ctrl+C, Ctrl+V, etc... those didn't work.

So I looked for a way to undo what I did and I found it in history.
I suggest you open history as height 90 by default.
As you can see in the below screenshot, that could let the user know there is those button Undo Redo, as well as seeing at least the last thing he did in the GridSound.

Keep up the great work !

Recording live question

Hi, this application is very impressive, is there a button to record live as you play on you computer keyboard? I'm probably missing something obvious, but I don't see how in the UI and there isn't a keyboard shortcut listed.

ignore this issue

Can't move within grids

I can't help but notice that there doesn't seem to be a way to move in time. The keyboard shortcuts says it should be shift+scroll, but how do you scroll?

sample envelopes

It would be nice to have more advanced instuments than plain oscillator - for example sample envelopes (on oscilator sounds) or even samples.

Notes created at wrong location

It's offset by half a cell when creating notes.
And also when resizing notes, but in that case it's reasonable.

So you could give _getMouseBeat a parameter, or split it into two functions,
one to give you the nearest position (with round), and you to give the cell (with floor),
maybe _getBeatNearestToMouse and _getBeatForCellUnderMouse

Trying to run the dev environment in the locally html

I was trying to run the project locally using static file index.html

./build.sh dep
./build.sh prod

Error

GET file:///C:/Users/Antoine/Desktop/Code/daw/daw-core/src/actions/closePattern.js net::ERR_FILE_NOT_FOUND
GET file:///C:/Users/Antoine/Desktop/Code/daw/daw-core/src/actions/openPattern.js net::ERR_FILE_NOT_FOUND
GET file:///C:/Users/Antoine/Desktop/Code/daw/daw-core/src/actions/openSynth.js net::ERR_FILE_NOT_FOUND

controls.js:34 Uncaught (in promise) DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at UIcontrolsInit (file:///C:/Users/Antoine/Desktop/Code/daw/src/ui/controls.js:34:22)
    at UIrun (file:///C:/Users/Antoine/Desktop/Code/daw/src/run.js:33:2)

The last one can be fixed with chrome cookies setting

after fix

Uncaught (in promise) TypeError: Cannot read property 'addEventListener' of undefined

function UIpatternsInit() {
	const orderBuff = new gsuiReorder(),
		orderDrums = new gsuiReorder(),
		orderKeys = new gsuiReorder();
...

The gsuiReorder is missing a opt/root element

I made the project run with

function UIpatternsInit() {
	const orderBuff = new gsuiReorder({
		rootElement: DOM.buffPatterns,
		itemSelector: "#buffPatterns .pattern",
		handleSelector: "#buffPatterns .pattern-grip",
		parentSelector: "#buffPatterns"
	}),
		orderDrums = new gsuiReorder({
			rootElement: DOM.keysPatterns,
			itemSelector: "#drumsPatterns .pattern",
			handleSelector: "#drumsPatterns .pattern-grip",
			parentSelector: "#drumsPatterns"
		}),
		orderKeys = new gsuiReorder({
			rootElement: DOM.drumsPatterns,
			itemSelector: "#keysPatterns .pattern",
			handleSelector: "#keysPatterns .pattern-grip",
			parentSelector: ".synth-patterns"
		});

	window.UIsvgForms.bufferHD.hdMode( true );
	window.UIsvgForms.bufferHD.setDefaultViewbox( 260, 48 );
	DOM.drumsNew.onclick = () => DAW.callAction( "addPatternDrums" );
	DOM.buffPatterns.addEventListener( "click", UIpatternsOnclick.bind( null, "buffer" ) );
	DOM.keysPatterns.addEventListener( "click", UIpatternsOnclick.bind( null, "keys" ) );
	DOM.drumsPatterns.addEventListener( "click", UIpatternsOnclick.bind( null, "drums" ) );
	document.addEventListener( "drop", e => {
		DAW.dropAudioFiles( e.dataTransfer.files );
	} );
	// orderBuff.onchange = UIpatternsReorderChange.bind( null, DOM.buffPatterns );
	// orderDrums.onchange = UIpatternsReorderChange.bind( null, DOM.drumsPatterns );
	// orderKeys.onchange = UIpatternsKeysReorderChange;
	// orderBuff.setDataTransfert =
	// orderKeys.setDataTransfert =
	// orderDrums.setDataTransfert = UIpatternsDataTransfert;

Also there missing the basic samples wav files in assets

Link to wiki does not work

The "Wiki" link (in the readme.md page) does not work.

Automation clips

Would be cool to implement automations like for volume or paning.
Also for some Custom-written js plugins for this DAW.

Feature Request: Bring back Wav Files

In the previous version of the DAW, there was the ability to sequence WAV files.
Will you be adding that option to this version?
here is a image from a fork: https://raw.githubusercontent.com/Hostworks/SoundScaping/master/soundscape.png

Feature Request: Save and Load Composition from Server-side or URL

Is there a mechanism to allow loading a composition from a URL or local resource on the server instead of dragging to the browser?

Thanks

Drums Panel is broken.

If you try to rearrange drums (move up or down) they will vanish.

Bug new composition's name

Hi

When I try to save a new composition (by pressing CTRL-S or directly by clicking the button), unfortunately, not all characters are taken into consideration.
If I want to write: "azertyuiopqsdfghjklmwxcvbn", only "aertyuiopqfjklmwxn" is process.
Missing letter: z, s, d, g, h, c, v, b

I tested on Windows 10, Firefox 50.1.0.

More instruments

Hi. You can add about 1000 musical instruments into your application. Use this library
https://github.com/surikov/webaudiofont
Project page consists of examples for complex songs, MIDI, strumming, some application.

Account registration not working

The page works fine, I got the email, but when I clicked the verification link, I got:

{"ok":false,"code":404,"msg":"No match for '(my email address)@outlook.com' with code 'd26356' (the code could be expired)"}

Request: Commit drum .wav files to assets submodule

Hello,

I'm working on a self-hosted version of GridSound. One issue I have is that the drum .wav files in the samples directory are missing from the assets repo. Would it be possible to add those in for easier building?

Thanks!

Opening it in dev mode

Hi,

I am intrested in testing this code and fork it in a dev enviroment, but I am not coping with it.
Can you please guide me in that process? I am using .NET framework and node.js enviroment.

Best Regards

Deleting a note unfocuses the notes area

I was confused when Ctrl+A didn't work... turns out it was because I had deleted a note.

Note: starting dragging from the empty space then over notes works fine, but starting from a note doesn't.

Drumcuts do not register when playing a cloud-stored song from a user's page

Steps to reproduce:

• Create a new song
• Create a drum beat with some drumcuts
• Login and save the song to the account's cloud storage
• Go to your user page and play the stored song from there

Drumcuts now register as a regular sample trigger rather than a stop trigger in this playback