https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

Sometimes the audio stops playing with no error message in the console and the whole app becomes unusable. No clue why though. Maybe handle the stalled event?

Will probably need electron or something for this.

• Add ability to reorder tracks in playlists with drag n' drop
• Add ability to select multiple tracks and add them to a playlist in one go (use Shift + click to select multiple)

Will be Isotach for the next few months, after that I'll think again about renaming it.

Suggestions:

• Tapes (based on my original idea Audiotapes)
• Soundstack

Loudness normalization (volume level) that is.

https://en.wikipedia.org/wiki/Audio_normalization#Loudness_normalization

More resources:

• https://community.spotify.com/t5/Live-Ideas/Desktop-Other-Improve-Spotify-s-volume-normalisation/idi-p/1128406
• https://en.wikipedia.org/wiki/LKFS
• https://webaudiotech.com/2016/01/21/should-your-web-audio-app-have-a-limiter/
• https://developers.google.com/web/updates/2017/12/audio-worklet
• https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode
• https://tonejs.github.io/docs/r11/Compressor
• https://github.com/pictomelody/FinalDemo/blob/91726e588858cfab70cbe3bac33a434dc51bbf23/pictoMelodyWebApp/static/js/tone/0.8.0/package/Tone/component/Compressor.js

On client side you could use webaudio dynamicsCompressorNode https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode. You could use this node to dynamically reduce the volume of the louder participant. And then you could add in a gain node to increase the total volume back up to a desired level (thus making the quiet speaker louder).

— https://groups.google.com/forum/#!topic/discuss-webrtc/apDrhJqjpj4

• Create custom icon font for the two icons (favourite/heart icons) we use from the Material Icons set, as opposed to loading the entire thing. Note that this font is only used for those two icons, in the other places we use SVG because the browser renders fonts way faster.
• Place the Montserrat font in the project and don't load it from the Google CDN, so that it's available for offline use. Note: There may also be some other fonts (about page and stuff).

When the user has a large collection (ie. like my 10000 tracks collection) and the sources are processing, the app doesn't perform that well. After the processing is completed it works fine though.

Possible solutions:

• Move more stuff to web workers?
• Use an XML decoder with better performance?
• ...

In case the browser doesn't have a required feature.

Using https://developer.mozilla.org/en/docs/Web/API/notification
or http://package.elm-lang.org/packages/pablen/toasty

At the moment we're using indexedDB, which works ok-ish, but every time we want to change something in the data structure the user loses his data and has the re-authenticate. This is because for indexedDB you have to define a database schema and for every change to this schema you have to write migrations to get from state A to B.

Currently, we don't write these migrations and that's why the user loses all of his/her data. Which obviously is a bummer, so we need to find a way to get around this.

Ideas

Store all of the user data as a JSON blob in the database

This sounds like a good idea, but seems like a non-trivial thing to do with indexedDB.

Otherwise the browser hangs 🤦‍♂️

• Local
• RemoteStorage
• Blockstack

Related issues:

• stacks-archive/blockstack-storage-js#12

When you type in the search-text field, it stores the user's settings and that blocks the app if you have a lot of tracks.

Try using just ports instead.

https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17

• Preload all font files (to avoid flashing text on the playlist screen) and background images
• https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c?gi=4057bbf9b8c5

Ideas

• Keep the tracks table always in the DOM and render the other pages on top of it? So that we can keep the loaded tracks and scroll position?

... unless you do something after the import which triggers a data store.

Or using a query param?

Loads of work to do for this one:

• Implement uploaders for each service
• Handle form uploading
• Handle file dropzones

Tested on the Chrome iOS client with a Amazon S3 source.

// XHR Generic error
// https://github.com/aadsm/jsmediatags/blob/master/src/XhrFileReader.js#L221
XHR.status = 0
XHR.readyState = 4

Most likely a CORS issue.

Protip: Use a single port with an "object"

💁 Suggestions are welcome!

Music storage

• Amazon S3
• Azure Blob Storage
• Azure File Storage
• Blockstack Gaia
• BTFS
• Dropbox
• Google Drive
• IPFS
• Local file system
• WebDAV

Maybe someday (if possible):

• Dat Protocol
• LBRY (not sure if possible)
• SeaFile
• Sia storage
• Soundcloud (not sure how this would work)
• Storj
• Torrents (streaming is difficult + CORS issues)
• Youtube (not sure how this would work)
• Wasabi

Cannot implement:

• One Drive
  Too much of a hassle, requires use of an iframe and doesn't allow CORS with the code flow (refresh-token flow). Using an iframe is currently impossible and would mean rewriting a large part of the app.

Authentication / Information storage

• Blockstack
• IndexedDB
• IPFS (v2)
• RemoteStorage
• Solid (postponed, not enough tooling yet)
• Textile (v2)

Since authentication is fairly unstable at the moment 🤦‍♂️

The now-playing state tends to dissapear when the tracks collection changes after a track's been inserted (ie. it's already playing). For example, start playing a track and then change the sorting method.

We currently can't do the following in Elm:

• Web Audio API
• Web workers
• LocalStorage
• ElasticSearch-like search
• Get info from music file via HTTP (jsmediatags)

So maybe we can:

1. Start writing "custom" Elm native code
2. Use another language that compiles to JS (eg. purescript)

https://remotestorage.io/
https://github.com/remotestorage/remotestorage.js/
https://5apps.com/storage

Related to #12

Is being exceeded way too quick and everything breaks when it does.

Solutions:

• Use index_db or whatever that thing is called
• Disable album_art in anonymous mode (not cool)

While trying to figure out why some of my audio tracks weren't being imported into the OR track list, I noticed that the mp3 files that weren't be imported were the ones with an embedded side data stream (like album art). These mp3s play fine in the browser if accessed directly, but they seem to be getting filtered out while processing the sources.

I can provide an example if needed, but I hesitate to put a hash pointing to a copyrighted song in this GitHub issue.

Here's an example of a file that cannot be added (as seen by ffprobe):

Input #0, mp3, from '04 Blankets of Night.mp3':
  ...
  Duration: 00:07:59.74, start: 0.025056, bitrate: 259 kb/s
    Stream #0:0: Audio: mp3, 44100 Hz, stereo, s16p, 255 kb/s
    Metadata:
      encoder         : LAME3.97 
    Side data:
      replaygain: track gain - -6.900000, track peak - unknown, album gain - unknown, album peak - unknown, 
    Stream #0:1: Video: mjpeg, yuvj420p(pc, bt470bg/unknown/unknown), 600x600 [SAR 1:1 DAR 1:1], 90k tbr, 90k tbn, 90k tbc
    Metadata:
      comment         : Cover (front)

Here's an example of a file that can be added:

Input #0, mp3, from '01 Before the Storm.mp3':
  ...
  Duration: 00:01:09.09, start: 0.025057, bitrate: 320 kb/s
    Stream #0:0: Audio: mp3, 44100 Hz, stereo, s16p, 320 kb/s
    Metadata:
      encoder         : LAME3.93 

Or in other words.

When you remove an item from the autogenerated queuing list,
should we ignore it so it doesn't show up again?

(until there are no more tracks available that is)

To be done after #18

Possibly something that's visible on all pages, or, a big block below the sources "info" in color. Either way, it should also be able to show you the progress.

... instead of just a loading indicator, which would be confusing in the case the new tab doesn't open.

Resources:

• http://package.elm-lang.org/packages/ir4y/elm-dnd/latest

I think a volume control would be handy.

I'm not sure if this is already planned, or if maybe there's an ideological opposition to volume controls (like Bandcamp's answer to "where's the volume control?").

Yes or no? 🤔

Which isn't supposed to happen.
I could be imagining things though 🤔
Everything seems to work fine for a day and then the next day the data is gone 🤦‍♂️

Basic electron version has been added + support for local files.

Still needs:

• Support for media keys

Thanks for the great suggestion @expede!

http://freemusicarchive.org/
https://archive.org/details/audio

I also have some free music in my collection, but I'm not sure if I can use that. I mean, do I need some actual proof that these are "free"? ¯_(ツ)_/¯

Only the first item changes.

There are a few issues with the Blockstack integration:

• stacks-network/stacks-core#499
• hirosystems/stacks.js#236
• hirosystems/stacks.js#264 & hirosystems/stacks.js#531
• stacks-archive/blockstack-browser#631

And I'm also waiting on some updates in order to integrate Gaia (Blockstack's storage system) as a Source:

• stacks-network/stacks-core#500

should we always mark them as a "manual entry"?

Todo:

• Fix favicons, remove transparent border (empty space)
• Indexeddb doesn't seem to work on mobile
• Safari version added to homescreen crashes

Idea:
Add peak meters, the left channel on the left and vice versa.
Add setting to disable.
Peak meters are hidden when the window is too small.

One possible look is the one from v1:
https://github.com/icidasset/ongaku-ryoho-v1/blob/master/app/assets/javascripts/application/views/visualizations_view.js.coffee

Much like ...

but then without colors (work with transparency), smaller bars (1 or 2 px) and vertical.

Other possible look is just a thin vertical line, left and right from the track list.
Similar to the style of the progress bar, but thinner.

Other idea:
Minimalist equivalent of loudspeakers animation.
https://img.buzzfeed.com/buzzfeed-static/static/2014-12/12/19/enhanced/webdr09/anigif_enhanced-27488-1418430525-2.gif?downsize=800:*&output-format=auto&output-quality=auto
http://www.netanimations.net/deep-blue-bass-speaker-thumping-pounding-vibrating.gif
https://img.buzzfeed.com/buzzfeed-static/static/2014-12/12/19/enhanced/webdr09/anigif_enhanced-27563-1418430720-3.gif?downsize=800:*&output-format=auto&output-quality=auto

https://www.youtube.com/watch?v=KAemN7spRfw

No ideas yet ¯_(ツ)_/¯

Is being worked on.

In working on a fork of RS.js to use SAFE Network (see maidsafe.net) as a backend and to test /demo that in gathering together as many RS compatible apps as I can. So would like to include o-r.

Please let me know (here) when you have a version working with RS. Thanks. Mark

Or somewhere else.

For:

• The track's context menu
• The equalizer