Question

21

Saving Audio to localStorage for Playback

rated 0 times [ 22] [ 1] / answers: 1 / hits: 13517 / 7 Years ago, sat, may 6, 2017, 12:00:00

I am trying to create a function in which an mp3 file is pulled from

<input type=file id=sound accept=audio/*/>

and stored in localStorage within Chrome. (I know localStorage is limited in size, but the audio files that I will be working with will be under 2mb.) Once this audio file is stored, it will be played with:

var audio = new Audio('audioFile');

audio.play();

I am still new to web development, so any pointers would be great!

NOTE: This is not a duplicate of HTML5 record audio to file. I am trying to take a preexisting mp3 file from my HDD and storing it into localStorage so that it can be played back.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaleelh

Add To Favorites

Follow

Total Points: 661

Total Questions: 125

Total Answers: 103

Location: Sweden

Member since Mon, May 8, 2023

1 Year ago

answered 7 Years ago brynn · Accepted Answer

This is not what localStorage is meant for. localStorage can only store strings and can only accommodate a small amount of date.

If you're really determined to do this you need to:

load the mp3 file into an ArrayBuffer

encode the ArrayBuffer into Base64

Store the Base64 encoded string in localStorage

Note that Base64 encoding usually increases the size of the source material by about 33%. This is because it can take any kind of data, including binary, and converts it to a string made of a 64 character set that's compatible with standard ASCII strings.

To play it back, you need to the opposite

retrieve the Base64 encoded string from localStorage

decode the Base64 string into an ArrayBuffer

load the ArrayBuffer into an Audio object

assign the Audio object to an <audio> element

It should also be noted that localStorage is often only given 5-10MB of storage space, depending on the browser. This can be tested here, but generally, keep your mp3 files small by encoding them with lower bit rates, use mono instead of stereo channels where possible, and reduce sample rate if the audio is just spoken words and not music.