enable download button for html5 audio player in chrome - javascript

I have an audio element on a page that is added dynamically using javascript in the dom.
The outputted html is such:
<audio preload="auto" controls="controls">
<source src="https://urlofmp3.mp3" type="audio/mp3">
</audio>
when I view this audio element on the page it looks like this:
As I understand Chrome is supposed to automatically put a download button on the right hand side... but for whatever reason it's not there. I've been able to find lots of sites telling me how to turn the download button off, but is there a way to explicitly turn it on?

const audio = `<audio preload="auto" controls="controls">
<source
src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" type="audio/mp3">
</audio>`;
document.getElementById('song').insertAdjacentHTML('beforeend', audio);
<div id="song"></div>
If you put a real MP3 file as src is showing the download button even adding the audio element dinamically with Javascript. I suppose that it checks and preloads the file and when success fills the controls...

i had the the same problem. i finally found a solution for this.
at first i just tried to let it download the .ogg .wav or .mp3 file this made it open in another tab in my browser but did not let me download it. now i treid to put the .oggfile into a zip folder and try to let it download the folder which was the solution for my froblem.
the code i use for this:
<button>
<a href="HooniganProds\songs.zip" download>Click to Download!</a>
</button>

Related

How to make HTML audio tag work in Opera?

i'm trying to add autoplay audio in my html page and i already tried embed and audio with and without controls and optional attributes, and absolute path. Tried different formats, though i know that Opera supports .ogg. My last try is here:
<audio controls id="music1">
<source src="./models/laughing.ogg" type="audio/ogg"/>
</audio>
html page and audio file are located like this:
if i press play button audio is played, but when i start my entire project the button is covered (as should be). And anyway i want it to be autoplay so
My Opera is the last version, Windows
Autoplay doesn't typically work. You need some sort of user interaction, like a click.
There is nothing you can really do about this. It's a browser "feature" to prevent ads from playing audio in the background.
<audio controls autoplay>
Try adding "autoplay" inside the voice tag.

In React audio tag not working, instead it just displays the link

In React I am getting the source file dynamically through an api call.
<audio src={rec.data2} type="audio/mp3" controls autoplay />
It is not displaying the usual play button with volume control, instead it just displays the link. What am I doing wrong?
try this:
<audio controls>
<source src={rec.data2} type="audio/mpeg">
</audio>
w3Schools explain it :
Definition and Usage The tag is used to embed sound content in
a document, such as music or other audio streams.
The tag contains one or more tags with different
audio sources. The browser will choose the first source it supports.
The text between the and tags will only be displayed
in browsers that do not support the element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.

Video background not displaying properly on some computer

I am meeting an error on my website and I can't put my finger on it, the custom video background I'm trying to implement works on some computers and doesn't on the some other.
It is not a problem of browser version since I tried it on 5 computers with the same versions and there is still 2 computer who fail to run the javascript on this specific area (it either works on all browser or the javascript goes off on all plateforms).
I think it is a problem of computer but what should I in order to make the JS of the video background work ? (If you can't pause or play the video, or if it launch as soon as you enter the page then you also have this issue)
Here is the website : www.fyz.ch/VR
Any thoughts ?
Maybe you need to convert the video in multiple file formats (mp4, webm and ogv).
I think you made a wrong structure for it and put a source tag outside of the video tag.
Add them like this :
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Your browser doesn't support the video tag
</video>
Moreover, it seems like you added the autoplay attribute to the video tag. So it's the normal behavior for the video to launch itself as soon as the user enters the site.
Could you provide some code to be sure of what your problem is ?

HTML5 audio tag in which Download possible?

I used audio tag of HTML5 and put 1 button for download that can any functionality provide by audio tag that we directly download as mp3 file.
<audio id="range" src="audio/1.mp3" type="audio/mp3" controls="controls">
<a href='audio/1.mp3'>DownloadButton</a>
</audio>
//used .play() , .volume() , .pause() working proper
Above functionality i tried but not working which i want. I want just click on button and direct downloaded that audio file. Please tell me if any one know proper way than guide me.!
The Chrome browser is used.
If you're just going to download the file, you don't need <audio> tags, which are for playing the file, not downloading, you can of course use both, but the anchor has nothing to do with the audio tag
<audio id="range" src="audio/1.mp3" type="audio/mp3" controls="controls"></audio>
DownloadButton

Streaming a WAV file. (NOT recording)

I'm trying to play a .wav as background music (It's match ambience) but I'm having problems getting it to stream, it's 20meg so I don't really want to make people wait for it to download... could be waiting 30seconds!
I had it working fine in IE but FF doesn't seem to like any code that works in IE :)
I was using an object to hold the sound which worked in IE. I also had some javascript fading the sound in and out when I wanted to.
Could anyone please provide me with a code snipplet for cross browser compatability for playing wav files without the need of additional plugins (if possible) and without using jquery or prototype or anything similar.
Try this:
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
But you should compress the wav file to mp3. You can see a live demo here.

Categories