search

Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.52k stars 983 forks source link

Fix: Loading samples with special characters in the file name #902

Closed danferns closed 3 years ago

danferns commented 3 years ago

This PR enables loading samples with file names like "C#5.wav".

Currently, this throws an error because special characters like "#" need to be encoded in the right format before being passed into fetch() as the URL.

The solution is to use encodeURIComponent() to convert these characters into their UTF-8 encoded escape sequences (eg. "#" -> "%23"). This is done for each level of the file path to also encode any special characters that may be present in the folder names.

danferns commented 3 years ago

I found that the previous solution did not handle non-relative URLs properly. It would encode the colon in the protocol (eg "https:" -> ""https%3A"), which threw errors when loading external samples as well as when loading data URIs.

I have fixed this by creating a Location object through the <a> tag. This separates the domain, the protocol and the file path.

Now, only the file path is passed into encodeURIComponent(). And since location.hash stores the substring of the URL containing the # symbol and everything after it, the full file path becomes location.pathname + location.hash.

I have tested this with external URLs, relative URLs, and a small wav data URI. It works as expected in all three cases! :)

tambien commented 3 years ago

thank you!