yvesgurcan / web-midi-player Goto Github PK

Let's figure out performance opportunities of the example and the documentation.

See info on Lighthouse: https://developers.google.com/web/tools/lighthouse#devtools.

After running the tools, create new issues based on the findings.

Acceptance criteria:

• There is a link to https://github.com/yvesgurcan/web-midi-player/packages/92236 in the README.
• Installing from GPR is documented in the "Install" section of the README.

Screenshot

Environment

• Version of web-midi-player: 1.0.15

Bug

Describe the issue as specifically as possible.

I don't know how to add custom events to the MIDI player. This would be useful if I extend the capabilities of the library in my own project.

Expected behavior

What did you expect to happen?

See steps to follow in the README to create custom events.

Example

Please provide the smallest code sample possible to reproduce the bug.
We recommend using CodePen or JSbin to provide a live example of the issue.

In the "Environment" section of the bug report template (https://github.com/yvesgurcan/web-midi-player/blob/master/.github/ISSUE_TEMPLATE/bug_report.md), add "Device" and "Operating System" fields below "Browser".

URL: https://github.com/yvesgurcan/web-midi-player/projects/1

Demonstrate how this library works on midi.yvesgurcan.com with a code example.

Problem

Describe the problem related to this feature request.

I would like to see answers to frequently asked questions.

Solution

What solution do you suggest to solve this problem?

Create the FAQ in the form of a Markdown file.

Environment

• Version of web-midi-player: 1.0.34
• Browser: Chrome
• Device: Pixel 3
• Operating System: Android

Bug

Describe the issue as specifically as possible.

When viewing the example on my phone, there is a lot of black surrounding the player and it looks tiny.

Expected behavior

What did you expect to happen?

The player should fit the size of my screen. Maybe we should use viewport?

Example

Please provide the smallest code sample possible to reproduce the bug.
We recommend using CodePen, JSbin, or CodeSandbox to provide a live example of the issue.

Environment

• Version of web-midi-player: 1.0.34
• Browser: Chrome
• Device: Pixel 3

Bug

Describe the issue as specifically as possible.

When browsing the example, the "Readme" link is displayed on the next line.

Expected behavior

What did you expect to happen?

When browsing the example, the "Package", "Repository", "Documentation", and "Readme" links should all be on the same line.

Screenshot

Explampify with code how to use pause, resume, and stop in the "Getting started" section of the README and also in the documentation thanks to JSDoc.

Problem

Abstract the handling of events to its own class (https://github.com/yvesgurcan/web-midi-player/blob/master/src/EventHandler.js) in order to improve the scalability, re-usability, and documentation of event logging.

Since patches can not be imported internally, we need to document how users can add them into their web application. We should maybe provide a ZIP file of all the patches for easy download.

Environment

• Version of web-midi-player: 1.X.X
• Browser:

Bug

Describe the issue as specifically as possible.

Expected behavior

What did you expect to happen?

Example

Please provide the smallest code sample possible to reproduce the bug.
We recommend using CodePen, JSbin, or CodeSandbox to provide a live example of the issue.

Problem

The library uses audioContext.createScriptProcessor. Unfortunately, this feature is getting deprecated: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createScriptProcessor#Browser_compatibility.

Solution

We should use AudioWorkletNode instead (https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletNode). This API uses a separate thread (like WebWorkers) to processor audio, thus improving the user experience when dealing with audio buffer (avoid stuttering and unwanted pauses).

Warning: AudioWorklet is still experimental and only partially supported by browsers. See https://caniuse.com/#search=audioworklet.

Environment

• Version of web-midi-player: 1.X.X
• Browser:

Bug

Describe the issue as specifically as possible.

Expected behavior

What did you expect to happen?

Example

Please provide the smallest code sample possible to reproduce the bug.
We recommend using CodePen, JSbin, or CodeSandbox to provide a live example of the issue.

Maybe create a Patreon?

Oi?

Primary features

Explain what you can do with this library. See #180.

Secondary features

Some of the reasons and advantages of using this library, including:

• Works with Webpack.
• Event-driven.

Environment

• Version of web-midi-player: 1.X.X
• Browser:

Bug

Describe the issue as specifically as possible.

Expected behavior

What did you expect to happen?

Example

Please provide the smallest code sample possible to reproduce the bug.
We recommend using CodePen, JSbin, or CodeSandbox to provide a live example of the issue.

Problem

Describe the problem related to this feature request.

Playback plays the MIDI at a fixed volume.

Solution

What solution do you suggest to solve this problem?

Offer a way to change the volume. Two methods should be added to the library:

• midiPlayer.getVolume()
• midiPlayer.setVolume({ volume: 0.87 })

Problem

Describe the problem related to this feature request.

It isn't clear from the documentation what the name of the events that are emitted is or when they get emitted.

Solution

What solution do you suggest to solve this problem?

Add these event names (such as MIDI_PLAY and MIDI_ERROR) to the documentation, using JSDoc.

In the documentation, the name of the events should be found in what the relevant methods of the EventHandler return.

For example, for the emitInit method, we could document what it returns with something like that:

 /*
     * Emits an event that indicates that the MIDI player is initialized.
     * @function
     * @param {undefined}
     * @return {object} payload
     * @return {string} payload.event `'MIDI_INIT'`
     * @return {string} payload.message `'MIDI player initialized.'`
  */

Problem

Describe the problem related to this feature request.

GitHub Actions publish to NPM but not to GitHub Package Registry.

Solution

What solution do you suggest to solve this problem?

Use the release script to publish to GitHub Package Registry.

Environment

• Version of web-midi-player: 1.0.15

Bug

Describe the issue as specifically as possible.

The issue template is not formatted to write feature requests or ask questions.

Expected behavior

What did you expect to happen?

• The issue templates should be found in the docs folder.
• Templates should use YAML front matter. Issues should be automatically added to the "Library improvements" project.

Example

Please provide the smallest code sample possible to reproduce the bug.
We recommend using CodePen or JSbin to provide a live example of the issue.

Problem

It would be great if version bumps could be handled when creating the build in GitHub instead of having to do version bumps manually with npm.

Solution

Create a custom GitHub Action forked from paulhatch/semantic-version (https://github.com/marketplace/actions/git-semantic-version) that takes a github_token.

            - name: Version bump
              uses: paulhatch/semantic-version@v2
              with:
                branch: ${{ github.head_ref }}
                # A string which, if present in a git commit, indicates that a change represents a major change
                major_pattern: "(MAJOR)"
                # Same as above except indicating a minor change
                minor_pattern: "(MINOR)"
                # A string to determine the format of the version output
                format: "${major}.${minor}.${patch}"
                github_token: ${{ secrets.GITHUB_TOKEN }}

Should also remove MIDI patches from example.

Problem

Describe the problem related to this feature request.

Right now, the logic to process which events are sent by the player requires comparisons of the event names with a string or variables created by the user.

See the React example into this repository:

Strings like 'MIDI_PLAY' or 'MIDI_ERROR' have to be typed or created by the user instead of imported as variables from web-midi-player.

Solution

What solution do you suggest to solve this problem?

Export all event names so that comparing which events are being fired is easier. Something like this:

import MidiPlayer, { EVENTS } from 'web-midi-player';
const { MIDI_PLAY, MIDI_PAUSE, MIDI_STOP, MIDI_ERROR } = EVENTS;

const eventLogger = (payload) => {
  if (payload.event === MIDI_PLAY) {
    console.log('playing');
  }
};

const midiPlayer = new MidiPlayer({ eventLogger });
midiPlayer.play({ url: 'some_file.mid' });

Screenshot

Problem

Describe the problem related to this feature request.

The library does not work on WebKit-based browsers (such as Safari).

Solution

What solution do you suggest to solve this problem?

Use an HTML object instead of AudioContext.

Problem

I would like to be able to know how long in seconds is a MIDI file.

I would like to be able to do something like const durationData = midiPlayer.getDuration({ url, arrayBuffer }) to get the duration of the file at url or the duration of the MIDI input in the form of arrayBuffer.

Nice to have: The duration could also be an output of the MIDI_PLAY event.

Problem

Describe the problem related to this feature request.

Right now, scripts that lint and create builds have to be run locally before a new version of the library can be deployed.

Solution

What solution do you suggest to solve this problem?

Use this GitHub action https://github.com/marketplace/actions/github-push to commit the changes of these scripts when running these scripts remotely.

• Implement unit tests using a library such as Jest.
• Give the option to provide an existing AudioContext to new instances of MidiPlayer for stubbing the Web Audio API and allow users to control the audio context themselves.

In the bug report Markdown template (https://github.com/yvesgurcan/web-midi-player/blob/master/.github/ISSUE_TEMPLATE/bug_report.md), ask reporters to share screenshots in the "Example" section of the template. Section should be renamed "Example/Screenshots" and add a few words about adding screenshots to the report.

Environment

• Version of web-midi-player: 1.0.34
• Browser: Chrome
• Device: Pixel 3

Bug

Describe the issue as specifically as possible.

The "Documentation" link of the example at https://midi.yvesgurcan.com/example/react incorrectly leads to https://midi.yvesgurcan.com/docs and shows a 404 error.

Expected behavior

What did you expect to happen?

The link should lead to https://midi.yvesgurcan.com/doc instead and display the documentation.

Screenshot

Show the log of the 10 last events that were emitted when the logger is set to "Custom function".

Acceptance criteria:

• Once the code is in production, the changes will be visible at https://midi.yvesgurcan.com/example/react/.
• A simple form should be visible at the bottom of the list of MIDI files preloaded in the example. The form will have 3 components:
  • A text input field with a placeholder that reads "Enter the URL of a MIDI file." This field only accepts valid URLs such as "https://adomain.com/thefile.mid".
  • Another text input field with a placeholder that reads "Enter a name for your MIDI." This field does not accept more than 60 characters.
  • A button labeled "Add MIDI".
• When clicking "Add MIDI", the application will store the file in localStorage. If the operation was successful, the name of the MIDI will appear in the list of MIDI files that can be played. If an error occurred, the name of the MIDI will not appear in the list and a message reading "Could not add MIDI file." displays.