Uploading an mp3 file with no backend - javascript

I'm making a music visualizer, and it's functional if the mp3 file is in the repository. So any songs it plays have to already be downloaded by me. I want to create kind of a drag and drop option where users can put mp3 files and then watch them being played. However, if at all possible, I'd like to avoid building an entire backend just for this one feature.
Is there a way to temporarily store a user file, which disappears on refresh?

It sounds like you're looking for the FileReader API, which allows you to work with files in JavaScript after the user chooses them from a file picker. You can find more info here.
Googling "JavaScript FileReader sound" returns a ton of results, including:
JavaScript / HTML5 audio: play mp3 file loaded by user via file selector in Android Chrome
JavaScript Play Uploaded Audio
Play audio local file with html
decode & play a song using html5 file api

Related

Using Webaudio in vscode extension

I wrote a vscode extension that creates a webview panel and I'd like to play an audio buffer when the user clicks a button on my page. I have this identical code working in a test page in a browser so I think I'm doing the webaudio part correctly.
I initialized with vscode.window.createWebviewPanel(...).
When I click the button on the page, it looks like the code is working (there are no errors thrown and the expected code path happens) but I don't hear any sound.
Is there something muting the sound in the webview? Is there something I have to do to tell vscode that sound is expected?
Or is it just impossible to make a sound in a vscode extension?
EDIT:
One more detail that I forgot to mention. I am creating the audio buffer in javascript but I am loading a number of small .mp3 files that I'm using as source. So it requires XHR to receive the .mp3 file and decodeAudioData to decode it.
From my experience, Web Audio API works fine in a VS Code webview panel, but its support for audio file types is very limited. It can’t decode .mp3 files or even .wav files.
However, an .oga file (Vorbis-encoded OGG) works.

How to cache audio file delivered from CloudFront using JavaScript / jQuery?

We are developing an online course website.
Courses have audio and text (no video).
Audio files are stored on Amazon S3 and delivered via AWS CloudFront.
Every time a user wants to play a course audio file,
website (server-side) sends a request to CloudFront to get the audio file.
CloudFront will deliver the audio file to the end-user (HTTTP response).
We use JPlayer to play the audio files.
Audio file format is MP3
We are facing the following issue:
Every time a user clicks on play/pause, forward, rewind buttons OR
jumps to a specific position on the audio player,
a new request (for the same audio file) is being sent to CloudFront,
so audio player position is reset to 00:00
Since CloudFront already delivered the audio file to end-user,
there is no need to generate a new request to CloudFront
every time user clicks on audio player buttons (play/pause, forward, rewind) etc.
So once user gets the audio file from CloudFront,
we want to cache the audio file.
How can we store an audio file in local browser cache using JavaScript or jQuery?
Caching audio files should be done using browser caching.
There are several ways to implement "browser caching".
Huge thanks for "stdunbar" for sharing the following link.
This link points to a great article that provides
an overview of the different browser caching solutions.
https://web.dev/storage-for-the-web/
For my use-case, the optimal solution for audio file caching is IndexedDB.
Here are some great articles on how to get-started with IndexedDB (IDB):
Basic concepts
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
Path locations in different browsers
IndexedDB location in Windows 8 Application
Tutorial 1
https://www.tutorialspoint.com/html5/html5_indexeddb.htm
Tutorial 2
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
Tutorial 3
http://www.onlywebpro.com/2012/12/23/html5-storage-indexeddb/

Making an HTML5 Video Playlist for Chromecast with Javascript

I'm pretty new with Javascript but know it's capable of some amazing things. I recently got a Chromecast. Among other things it allows me to cast/stream any video or webpage to my TV when I click the Chromecast extension.
So, for example, I can load a video in my browser just by browsing to the file with the url like so: file://localhost/Users/username/Downloads/workaholics.s03e14.hdtv.x264-2hd.mp4. And when I click the Chromecast extension it plays on my TV.
I'd like to know if it's possible to create a playlist somehow for videos to be played this way. But I've read that, for security reasons, Javascript will not supply the path to a file, only the name. I was planning on letting a user browse through or drag and drop files to a playlist, and somehow play them back-to-back. I can't seem to figure out how to implement this. I was planning on getting the full paths to the videos added to the playlist and looping through them to play, but getting the full path is apparently not possible. If this is only run locally, with my local files, is there a workaround for something like this? Or anybody have other ideas?

Offlining media files in Phonegap 3.0

Using the Phonegap media API, it is possible to play back external files hosted on a web server.
Once that file has been played, I wonder if it is possible to save it locally, so that the next time I listen to it, I can get it from a local path rather than from a URL? This is what I mean by "offlining".
However, there is no save() method in the media API. Is the file stored in a cache so that I can pick it up using the file API (provided I knew the path)?
I suppose one solution could be to download the file and then play it, but I don't want to keep the user waiting for the download to finish. I want to start playing the media file a s a p. Is it possible to start playback before the file has downloaded completely, using progressive download, for example?

Allow user to select and play audio or video file on browser

i want to allow user to select an audio file and play it on browser. first, i use file input to get the audio file data
<input type='file'/>
let say X represent that input, so if user select a file, i can get the file data from X.files
then, i want to send the data to this tag
<audio ...></audio>
and provide the UI to allow user to control the audio
How can i do this thing WITHOUT go through server?
Store the audio file in the server that you are selecting and uploading using
<input type-"file"> tag.
during that process keep the path of that audio for your reference and give that path to your audio tag to play it.
Hope that helps.
You can't do this without going through a server!
Please check this:
How to get the file path from HTML input form in Firefox 3
"<input type="file" />" Is most notably used for uploading files on a remote server.
If you wish to create a web site where users can play their uploaded music or view their videos, you should consider using some Server-Side technologies to achive file uploading.
You can start with one of the following:
PHP
Python
Ruby On Rails
ASP.NET / Microsoft Web Technologies

Categories