How to display an audio file from backend in HTML and React? - javascript

I have a program where backend sends an audio file to React frontend. But it is not getting displayed as expected.
Here is the code in frontend.
enter image description here
And here is the response. The audio file is in res.data
enter image description here
After doing a little research, I am displaying audio file as this:
enter image description here
But it shows empty audio player.
enter image description here
What am I doing wrong here, as I am getting audio file when I test it in Postman

Related

How to get the first page of uploaded file and create thumbnail of it in react Js?

There is a form through which Im uploading a presentation (accepted formats are ppt or pdf). When the user uploads the presentation file I want to convert the first slide into an image and show that in the form of thumbnail (refer to image). How to achieve this on frontend (React Js).
(https://i.stack.imgur.com/Qxk8N.png)
I tried using react pdf-viewer library but it need url of the uploaded file for which first i need to upload the file to the backend and this package only works for pdf files.So im thinking good appraoch will be to access the first page of uploaded file and convert it to an image. But im unable for access the first page of uploaded file and convert it to image in react js. Kindly help.
I think you can use the background-position attribute of css to locate the first ppt after converting the ppt into an image.

Are data URI links permanent?

So in this website I am making, the user is able to upload an image and then preview that image all on the same page.
If I right click the image that is being previewed (as a thumbnail) and click on "View Image", it will open the image in a new tab with this super long data URI.
I was wondering, are data URI's permanent (as long as the website doesn't get deleted or something)?
If I upload an image on my website, get a data URI, and don't ever delete the website, then would the data URI still be valid a year later, from any device (that can connect to the internet and access a browser) anywhere in the world? Would I still be able to view that same photo I uploaded a year ago?

Uploading an mp3 file with no backend

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

play audio file and make the user not able to know the file name

what i want is very much not a specific code , so what i want is to play a audio file on some page and this audio file in directory, the page has to call the audio from the directory by the file name and play it on the page, so i want to play the audio and when some one inspect the page he will not be able to see the file name, how i can do it ? i tried
<html><p>just a word</p></html>
I Tried
just another code

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