Download mp3 instead of playing - html

I can't download an mp3 file from any browser. Instead the browser always plays from the new window. I've seen similar questions, but no answer helped.
<a id="download_${i}" href=${val.ref} download>Download</a>
I also tried:
<a id="download_${i}" href=${val.ref} download="test.mp3">Download</a>
but doesn't work. Is there any simple way to download the mp3 file?

Related

How to prevent automatic download of a linked mp3 file

I am making a website using only HTML and CSS. I am trying to link to an online mp3 file (that I do not own) so that the mp3 plays in the browser. This simple code does what I want on Firefox and Safari:
<a href="https://www.allaboutbirds.org/guide/assets/sound/548271.mp3" >
However, instead of playing the mp3, Chrome automatically downloads the mp3 file to my computer. Is there some way I can alter my HTML code (not my browser preferences) to stop this from happening? Thanks.
You can't guarantee that all the browsers will have a built-in in-frame player for the audio file.
The best thing to do in this case is to embed the audio player into a page with the audio element:
<audio src="https://example.com/some-sound.mp3" controls></audio>

How can I download an mp4 file using the 'download' property of HTML's a link?

I want to be able to download the "video.mp4" file with the code below.
<a href="video.mp4" download>download</a>
However, it is not downloaded and played.
How can I make it downloaded without being played?
download

Can I link audio thats not local into my html file?

My hosting doesn't allow me to upload mp3 or any audio files, so is there any way I can link audio in some other way? I know we can embed soundcloud and stuff but just wondering if there was any other alternative.
I’ve found this very useful guide that covers some alternatives:
Linking to a sound file using a href allows a browser to open and play
an audio file if the viewer of your web page has properly configured
their Internet browser. You can also use the tag or the newer
tag to insert a sound file directly into a web page.
<a href> tag
<a href="https://www.computerhope.com/jargon/m/example.mp3">Play sound
file</a>
<audio> tag
The tag can create a media player as part of the web page. It allows the visitor to play, stop, pause, or download an audio file. The element is compatible with all modern web browsers.
<audio controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" />
</audio>
<embed> tag
An older method of including audio files is to use the tag. While this method certainly works, it is less efficient than those which were mentioned above. As such, we recommend using one of the solutions demonstrated above.
<embed src="https://www.computerhope.com/jargon/m/example.mp3">
I figured the best way to do it without uploading your audio/music, BASE64 ENCODING!!
Very easy, kinda messy and supposed to be used for images I guess but works fine with audios and should work with videos as well (haven't tried videos)
Here a base64 encoder: https://omatsuri.app/b64-encoding
WARNING THOUGH! IT MIGHT GET LAGGY & MESSY

How to download html5 video with javascript without opening a new tab?

I have tried:
<a href="https://.../myVideo.mp4" download>Download video</a>
but when I click, it opens the video on new tab. How can I instead initiate the download as file (maybe with javascript if there is no other way) ?
Also, I am really annoyed because the built in html video controls do have this download functionality and also there is no CORS issue with the built in video player. So why there just cannot be an easy way to have a video.download() API ?? Is there a reason for this ?
My question is related to: How to customize HTML5 Video Download Button which has not been answered yet.
Using direct https url will probably never work since the browser will treat it as an outide link.
Try using relative path of your video rather than using the https url. Ex below:
<a href="folder1/folder2/myVideo.mp4" download>Download video</a>

Google Chrome - HTML5 audio and WAV files

I am using HTML5 audio tag to link to a WAV file, but it suddenly seems to be failing. Chrome does not seem to be able to play WAV files (MP3 works fine). I get an error message like:
Error loading: "blob:http%3A%2F%...."
Does Chrome's audio tag support WAV? For e.g., try playing this: http://www.nch.com.au/acm/11kulaw.wav
I am on Chrome version 15.0.874
I don't get the error in Chrome, but the file does not play. The control is visible, but is not working.
There is a bug report in Chromium project that seems to talk about the behavior:
http://code.google.com/p/chromium/issues/detail?id=83323
The gist of it is that .wav can mean a bunch of things and have various encodings. The comments recommend using a plugin to handle this or downloading the file.
For the purposes of serving it on the web, I'd recommend compressing it to an MP3 and an OGG format (if you want to be nice to FOSS people) and including multiple source tags.
I had this problem with an mp3 audio file that did not play just in Google Chrome (this problem could be happening with other audio format files too, like wav or ogg).
I opened my mp3 file in an audio editor (Audacity) and saved it again in the desired format (in this case, *.mp3).
It works correctly in Google Chrome.
My conclusion: if the audio file does not play, the problem is in the settings that generated the audio. Use another program, with other settings.

Categories