Giter VIP home page Giter VIP logo

midi-surf's Introduction

MIDI Surf

A flexible and powerful MIDI controller anywhere you have a browser!

sketch1673045999388

MIDI Surf is a browser-based MIDI controller that is optimised to work on a range of devices, including tablets and smartphones. It is highly customisable, enabling you to make a controller that is exactly what you need to make or perform your music at any given moment.

Take a look at this video to see it in action.

Features

Here's a quick rundown of some of the features:

  • Install to your device as a progressive web app and use offline!
  • Buttons for playing notes, chords and sending CC
  • Faders for smoothly changing CC
  • Set MIDI parameters automatically by pressing the key or changing the parameter on your device!
  • Custom isomorphic keyboards with any size and offset you like
  • Create scale keyboards or chord banks in seconds
  • Store pages and modules to reuse later
  • Share presets as a link
  • A MIDI event viewer so you can see exactly what MIDI messages your device is sending

As useful as it is just now, this is just the beginning for MIDI Surf, I have lots of features in the pipeline. Check out my YouTube channel for development videos, tutorials and other music technology/programming related content!

Support the project, but no obligations, it's free to everyone!

Please consider supporting the development of this app if you enjoy using it, I'd really appreciate it if you did! You can join our community on Patreon and help guide the direction the app (and future software from Mo Chreach!) takes, or buy me a coffee/beer/cup of tea/sausage roll on Ko-Fi.

Browser Compatibility

On both desktop and mobile, I'd recommend using an up-to-date version of a Chromium-based browser to use MIDI Surf, such as Chrome, Edge, Vivaldi, Brave etc. Currently (as of Jan 2023), Safari and Safari on iOS do not support the Web Midi API. Take a look on Can I use for an current browser compatibility.

Presets

Here is a list of presets you can import: https://github.com/mochreach/midi-surf/blob/main/presets.md

Update History

  • 0.5.3 (2024-02-13): Now clears URL query string after importing a controller.
  • 0.5.2 (2024-02-07): Fixes bugs related to saving modules and undoing changes.
  • 0.5.1 (2024-02-06): Fixes a bug with setting the viewport.
  • 0.5.0 (2024-02-06): Adds SysEx msgs, deleting items in rows/columns, wrapping containers in modules.
  • 0.4.0 (2024-02-03): Theory Craft - Adds chords keyboard and scale keyboard. Adds sized columns and rows.
  • 0.3.4 (2023-03-05): Fixes a bug with commands.
  • 0.3.3 (2023-02-28): Fixes scaling issues.
  • 0.3.2 (2023-02-11): Fixes fader bug with min max value not being used and web midi error reporting.
  • 0.3.1 (2023-02-06): Fixes fader max value bug and midi indexing.
  • 0.3.0 (2023-01-30): No Wasted Effort - Adds ways to save and export presets.
  • 0.2.0 (2023-01-22): The Hands On Update - New controller types.

midi-surf's People

Contributors

chriswellswood avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

midi-surf's Issues

Add advice about usage on iOS

Add advice for iOS users. Vantablack on the OP Forums suggested this as a route to getting round iOS web midi problems:

[vantablack] Install web midi app, looks like a browser because it is, from App Store, open midi surf url in web midi app and save it for offline use

How to install on android?

What's the recommended workflow to actually install as a PWA on android? I'm trying to make it happen with cordova but it's not super straightforward. Do you have a process you're using to get an apk?

Add documentation for setup up a develop version of the project locally

I am trying to get into elm and fiddle with the source code myself. I'm totally new to web dev and Elm, I mostly work on .net desktop apps.

When I run elm make Main.elm and try to open the resulted index.html I get this error:

Initialization Error

Error: Problem with the flags given to your Elm program on initialization.

Problem with the given value:

undefined

Expecting an OBJECT with a field named `mInitialState`

Can you help me get started on this? I'm probably missing something very basic.

What is exported json file for?

Hi, great idea, great app! I'm making a preset for the Roland S-1
I'd love to be able to export the json file and edit by hand using vim or textpad to add similar instances of commands. How can I import an edited json file? Thanks.

Finalise Hands On version update.

I need to:

  • change the version number
  • Add test regression test that includes all new modules
  • Add new modules to examples
  • Update the info page
  • Tag the release
  • Build the app

Fader max value incorrect

Faders only change a parameter up to 78% not 100%. This is because the fader value is between 0-100 and then this value is used as the midi value that is sent to the device. This should be normalised from 0-127 then sent out.

Idea/Request: Toggle option for Command

Command has Press and Release, but could have a toggle option (maybe a checkbox that changes the Press and release to A/B state and changes the colour)

The toggle behaviour could be a differnt "button" (Along CC value and Command)

Add SysEx support

I couldn't find a way to add custom sysex messages. This is a must in my opinion.

iOS browsers can’t save or export + on off would be useful!

Hey, this is amazing! Extremely useful - except for now also unusable on iOS because there’s no proper way to save your work.

I tried so far on chrome and opera

two main issues:

  1. saving page function is useless - once you close the page, you can never reload it, it disappears. it only works so long as you keep your page open.

  2. if i try to save my work by exporting the page URL, it gives you a little copy paste icon for the URL, but when you press it, it doesn’t actually copy the URL! you have to manually select the URL and copy and paste it from that little prompt box, but it takes forever to scroll to select it because it’s so long.

An on/off button function would be amazing - like you hit it once and it does one midi value, but if you hit it again it does another value - versus now where we have to make separate buttons.

I see in your video that you mentioned toggle, so maybe you’re already on it!

ooh also, when the button colour is black the text is also black so it becomes invisible - the text should turn white or gray for it to be visible

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.