ryohey/signal

Online MIDI Editor: signal

signal is a user-friendly music sequencer application developed using web technology, designed for seamless, cross-platform use.

Goals

• Cross-Platform Compatibility: Ensure accessibility across various devices and operating systems.
• Simple User Interface: Focus on an intuitive, non-complicated user interface for ease of use.
• MIDI Compatibility: Support for MIDI format to facilitate a wide range of music production needs.

Concepts

signal is conceptualized not as a replacement for a Digital Audio Workstation (DAW), but as a complementary tool. It excels during the initial stages of music composition and sketching, allowing artists to quickly and efficiently lay down their musical ideas. To keep the focus on composition without distractions, signal comes with intentional limitations:

• Basic Sound Quality: Prioritizes simplicity over high-quality sound production.
• No Effects (Fx): Excludes sound effects to streamline the music creation process.
• Lightweight Design: Optimized for minimal resource usage, ensuring a fast and responsive user experience.

By setting these constraints, signal aims to offer a streamlined and distraction-free environment, ideal for artists focusing on the core aspects of musical composition and idea development.

Setup Instructions

Cloning the Repository

1. Open your terminal.
2. Clone the repository by running:

   git clone https://github.com/ryohey/signal.git

3. Navigate into the project directory:

   cd signal

Installing Dependencies

1. In the project root directory, run the following command to install the required dependencies:

   npm install

Running the Application

1. To start the application, run:

   npm start

2. The application should now be running on http://localhost:3000.

Contribution

As the creator of signal, I, @ryohey, welcome any form of contribution to this music sequencer application. Your support, whether it's through code improvements, bug fixes, or feedback, is invaluable in enhancing and evolving signal.

Reporting Bugs

• Encountered a bug? Please use GitHub Issues to report it. Your reports are crucial in identifying and resolving problems, ensuring a smoother experience for everyone.

Join Our Discord Community

• I've set up a Discord community for signal users. It's a space for mutual support, sharing tips, and discussing music production. Your participation would be a wonderful addition to our growing community.

Support Through GitHub Sponsors

• signal is a personal project that I've been passionately developing. If you like what you see and wish to support my efforts, you can do so through GitHub Sponsors. Even the smallest contribution can make a significant difference and is deeply appreciated.

Your engagement, big or small, contributes greatly to the development of signal. Thank you for being a part of this journey, and I'm eager to see the impact of your contributions on this application.

signal's Issues

Shift+mouse wheel for horizontal scrolling

Is your feature request related to a problem? Please describe.
I would first like to say that this project is a great initiative! I've not seen any other open web-based midi-editor at this standard. A small room for improvement would be to add shift+mouse wheel for horizontal scrolling as this is seen in many other midi-editors (such as Logic Pro, FL Studio).

Describe the solution you'd like

• shift+mouse wheel down should scroll the midi editor left
• shift+mouse wheel up should scroll the midi editor right

Describe alternatives you've considered
I know that scrolling left/right on a trackpad works, which is great! But sometimes you only have a mouse and that can be more efficient.

Additional context
Another feature I like very well from Logic Pro is alt+scrolling for vertical zoom and alt+shift+scrolling for horizontal zoom.

Metronome

Play metronome while recording

Reverb

I would like to have tunable global reverb when creating and playing music. I think this would be a killer feature anyways, but especially after #152 was merged I think it is even more important. Scoping this to be global (all tracks) would solve most usecases but in long term it would of course be nice to make it tunable to each track.

A good source of inspiration would be https://mmontag.github.io/chip-player-js/ (play a song -> click on 'Settings' and you will see reverb as a one of the parameters).

Improve MIDI control and key binding to reset track head position.

Is your feature request related to a problem? Please describe.

There are a few things that I think could be improved to make the experience a little better:

• If you want to stop playback and reset track head position, you have to use your mouse to press on the "Stop" button.
• MIDI notes keep playing when pausing/stopping while one or more notes are playing. This is especially tedious if you use synths with sustain, as they will keep on playing until you resume to the end of notes.
• Cannot disable volume MIDI control. It blasted my ears because the volume was set to 100% in the sequencer, but expected it to be at 50%, as I had set in my synth — the MIDI control overrode my synth's volume control.

Describe the solution you'd like

• Allow ENTER key to stop the playback and put the track head back to start position.
• Stop all notes on pause/stop — currently a note keeps playing when you pause or stop while notes were playing.
• Have a setting to disable other MIDI controls like volume, and only listen for MIDI notes.

Describe alternatives you've considered

I don't believe there are other alternatives.

Canvas flickering on resizing window

Note channel is missing when load and save a midi file

Describe the bug
Note channel is missing when load and save a midi file

To Reproduce
Steps to reproduce the behavior:

1. Open the attached midi file
2. Save to a new midi file
3. Channel information for all the notes is lost

Expected behavior
The channel information should be preserved.

Looks like channel is omitted in

signal/src/common/helpers/noteAssembler.ts

Line 60 in 033dd58

export type TickNoteOnEvent = Omit<NoteOnEvent, "channel" | "deltaTime"> &

Any reason why?

123.mid.zip

iPad Support

A recent fix has made it work with Safari. However, there is a problem with scrolling and other touch gestures not working.

Add some demos

The idea is just to add some demo songs, to get a quick idea of the app running

設計メモ

良くないところ

• 設計に統一感が無いので新機能が作りづらい、わかりづらい
• ビジネスロジックを Stateful な Container Component の RootView に集中させているが超ファット
• マウスイベントのハンドリングを誰がやるか？

共通してある処理

イベントの表示

1. Song から現在表示中の Track を取得
2. Track から events を取得
3. events を表示する種類だけにフィルタリング (Component により異なる)
4. events を画面座標系に変換 (Component により異なる)

マウスイベントのハンドリング

1. ポインタ位置のイベントを取得 (Component により異なる)
2. アクションの種類を判定 (ノート追加、削除など) (現在のツール・Component により異なる)
3. ポインタ位置を音符座標系に変換 (Component により異なる)
4. Track に対してアクションを実行

現在 1 だけ末端の Component で行っているが、2, 3 もその Component で処理する？
4 は共通のアクションを定義する？

改善案

RootView から Component に現在のツールのモードと、アクションを実行する dispatch 関数を渡す

<PianoNotes
  dispatch={dispatch}
  mouseMode={mouseMode}
  ...
  />

onClick = e => {
  /* もろもろの処理 */
  dispatch(CREATE_NOTE, { id, tick })
}

デメリット: 末端の Component が座標変換を行うので音符座標系についての知識が必要 (逆に言えば、RootView が各 Component の座標変換について知らなくて良くなる)

Support MIDI Keyboard Input

Implement using WebMIDI API.

Notes Not Working

The bug(s) occurring is seemingly random and has multiple effects

• Notes not being able to extend properly
• Notes playing at the wrong time, not matching what is being shown on screen
• Notes not playing at all despite showing up on-screen/playing when nothing shows up on-screen

Steps to reproduce the behavior:

1. Go to 'signal.vercel.app/edit'
2. Start creating
3. Using the selection tool to copy + paste identical patterns seems to create problems?

I'm not sure exactly what is causing the problem but, for me, it has happened every time I've tried to create a song, eventually.

The expected behavior is obviously that notes are created, played, and copied normally
The bugs mostly become clear with a video: https://youtu.be/r63KQql1EWs

Desktop:

• OS: Windows 10
• Browser: Google Chrome (incognito)
• Pretty sure it's the latest version as of posting (4/19/2021)

MIDI out

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

It's just a feature.

Describe the solution you'd like
A clear and concise description of what you want to happen.

The ability to send MIDI Data via a MIDI out. Maybe the possiblity to choose channel for each track.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

There is no alterntive?

Additional context
Add any other context or screenshots about the feature request here.

Add drum kit?

This looks like a great tool - thank you for all your work.

Is your feature request related to a problem? Please describe.
I would love to be able to add a track for a drum kit (in addition to a keyboard).

Describe the solution you'd like
When creating a track, allow the option to choose between either a vertical keyboard or a drum kit. The drum kit could probably work in a similar way to the keyboard - it would just have a small number of channels / keys with one dedicated to each drum (kick, snare, clap, hi-hat, etc).

MIDI ファイルの読み込みと保存

• 読み込み
• 保存

Right click menu to quantize notes

バグっぽい挙動

• 右クリするとブラウザの右クリメニューも出る
• 曲作ってる途中からBPMの変更できなくなった（下の入力欄で変更しても変わらない）
• いろんなmidiファイルを読み込むと前のmidiのごみらしきものが残る（表示上だけ）

NPM Module

Is your feature request related to a problem? Please describe.
I'm building a music project editor and would love to include Signal as an editor within the page.

Describe the solution you'd like
import { Signal } from 'signal-react'

Additional context
This would require publishing on NPM and including a bundle that doesn't include things like Sentry.

Realistic sounds

Is your feature request related to a problem? Please describe.
You need more realistic sounds

Describe the solution you'd like
use
https://github.com/surikov/webaudiofont

Add Hold Pedal Control

1 bar quantization starts with wrong position

Pan Feature Not Consistent

When making a song, sometimes the "pan" feature does not actually change the pan of the track.

I was making a song and on the first of my 2 tracks the pan feature wasn't working, on the second it was working fine.

A clear video of the problem can be found here: https://youtu.be/lI11hVcW4K8.

• OS: Windows 10
• Browser: Chrome

Right click to delete?

Now that we can drag to change duration and pitch, can we add a feature which is right click a note to delete it?

After playing with it for a couple minutes, it looks like the existing alternative to delete a note is to drag it out of the window?

トラックリスト

• トラック一覧の表示
• ピアノロールの概要の表示
• 編集
  • 範囲選択
  • コピー、貼り付け
  • 時間削除、挿入

File System API

• Allow overwrite
  • Alert when overwrite midi file that not created with signal
• (Optional) Add Recent file menu
• Add Abstraction layer for browsers that do not support the File System API

https://developer.mozilla.org/ja/docs/Web/API/FileSystem
https://github.com/GoogleChromeLabs/text-editor

Support tempo coming from MIDI in sync pulses

It would be useful if the app could respect incoming midi sync/timing information, so an external source could drive the tempo of the sequence being output.

So if the tempo button had a MIDI IN option.

Show notes also when it start before the current viewport in the piano roll

Is your feature request related to a problem? Please describe.
I find it annoying that I can't see a note when it starts before the current viewport in the piano roll. Solving this would mostly just improve user experience, but there is a concrete bug when you thought you have scrolled to the beginning of a bar and add a note there, it will not appear in the piano roll. This can lead to duplicated notes it you click several times.

Describe the solution you'd like
I want to see notes even when they start before the current viewport in the piano roll.

Describe alternatives you've considered
It would be the current solution - but I think it is strictly better in every way to see the notes

Additional context
I would like this to also apply to ghost notes

Modify controls without quantization

Change values in more flexible timings for pitch bend and other control events.

内蔵音源

• 内蔵音源として使える音色ライブラリの選定

Fix release time for rhythm instruments

It seems to be too long as specified in the SoundFont.

Safari playback issue

Firefox playback problem

Reading MIDI files and rendering are normal, but audio playback is strange. It behaves as if sounds are sounding at the same time at each timer interval of the player.

Undo playback issue

After undo, Player does not play correct notes

イベントを再生するための構造

• MIDIFileReader / Writer: MIDI ファイルから Event を読み出し、MIDI ファイルに書き出す
• NoteStore: Event を格納する
• NoteTransformer: Measure, Tick などの単位を表示用のピクセル単位のデータに変換する
• Player: 再生状態を管理する
• MIDIOutput: Event を受け取って MIDI のイベントを送出する

Improve selection behavior

• 矩形範囲ではないノートIDの配列だけの SelectionModel を許容する
• 単体のノートをクリックで選択できるようにする
• Shift 押しながらクリックで選択範囲に追加
• 選択中にノートリサイズで他のノートもリサイズする #26

Instrument Playing Previous Sound

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '{URL}/edit'
2. Click on 'InstrumentBrowser Button'
3. Keep changing instruments.
4. See error

Expected behavior
When clicked on instrument it should play it's own sound, Instead It is playing previously selected sound

Desktop (please complete the following information):

• OS: Windows
• Browser Brave

Additional context
I tried to debug I found what is causing it but could not fix it. when click on instrument it is getting stored in the store but the component is not getting updated after that.

Add context menu to control pane

This will add features copying pitch bend and other control events

配布用のパッケージを作成する

github の releases に置く

CI サービスを使って自動的にテストが実行されるようにする

Improve Tempo Editor

• Remove SetTempo event
• Disable quantization / Draw curve
• Non 4/4 beat

Improve playback

Currently we using Timer and buffer to play notes specific timing but we should use offset parameter WebAudioAPI to reduce the latency and code complexity.

https://developer.mozilla.org/ja/docs/Web/API/AudioBufferSourceNode/start

Export to wav

• offline rendering with wavelet AudioNode
• faster than real-time if possible
• save to wav file

ピアノロール

• 音符
  • 配置
  • 削除
  • 長さの変更
  • 範囲選択
  • コピー、貼り付け
  • 操作のクオンタイズ
• コントロール
  • 棒グラフの表示
  • 棒グラフの編集
  • 折れ線グラフの表示
  • 折れ線グラフの編集
  • 範囲選択
  • 操作のクオンタイズ
  • ベロシティ等の表示、編集

Step recording

Shift+hold click to select in place note tool

Is your feature request related to a problem? Please describe.
So I want to be able to make songs faster. I don't wanna have to move my finger to the 2 and 1 key or move my mouse to the button. I want to hold shift to select an area of notes.

Describe the solution you'd like
to quote the great me
"I want to hold shift to select an area of notes."

Describe alternatives you've considered
have not

マージしやすいファイルフォーマットを考える

背景

• 共同作業をするために楽曲の編集をマージする必要がある
• midi はバイナリファイルなので、意味のある差分を取り出すことが難しいため、マージが難しい
• 少なくともテキストで保存する必要がある

候補

• 現状の Song の構造をそのまま json としてシリアライズする
• 操作を1行のテキストとして、ひとつのテキストファイルに追加していく

json 案

{
  "version": "0.0.1",
  "name": "song name",
  "tracks": [
    {
      "name": "Conductor Track",
      "events": [
        {
          "id": 0,
          "type": "meta",
          "subtype": "setTempo",
          "value": 500000
        }
      ]
    },
    {
      "name": "Piano 1",
      "channel": 1,
      "events": [
        {
          "id": 0,
          "type": "channel",
          "subtype": "note",
          "velocity": 127,
          "noteNumber": 56
        }
      ]
    }
  ]
}

• メリット: 実装が非常に容易
• デメリット: マージで壊れやすい (中括弧とか)

1行テキスト案

add_note 0 12 240 127 73
move_note 0 0 +1 -1 
delete_note 0 0
rename_track "center guitar"

• メリット: マージが容易 (操作と行が一対一対応しているため)
• デメリット: 全ての操作を記録するためファイルサイズが大きくなる

テスト環境の構築

• ローカルでテストを実行できるようにする

Modify the position of subsequent time signature when editing a time signature.

Improve Arrange View

• Duplicate Track
• Add Track
• Remove Track
• Paste track selection
• Transpose
• Change default quantization to 1 bar
  • Separate Quantizer from piano roll

要望色々

• 取り消し（Undo）がほしい（Ctrl+z的な）
• ノート置くモードと選択モードをなんかもっと簡単に切り替えたい
• ノート置いたり移動させたりしたときだけじゃなくてクリックしたときにも音出してほしい
• ノート選択した後、DELでノート消したい（Backspaceはできた）
• ダブルクリックでノート消したい
• オニオンスキン的なやつほしい
• 矢印キーの上下でノートの音程移動、左右で選択ノードの移動、Shift+左右で時間移動などしたい
• 複数ノート選択してからノートの長さ変えたら選択中ノート一括で変わってほしい

electron と React.js で空のアプリを作る

• ディレクトリ構成もこの時に作る

ディレクトリ構成案

• coffee
  • FooModule
    • FooEntity.coffee
    • FooValue.coffee
    • FooController.coffee
    • FooComponent.coffee