In my case i want to give feasibility to user download mp3 file and it's good working in google crome, but in safari audio tag is working fine but download option is not showing.
html code
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
On Safari 15.3 after fiddling a bit I discovered an option that right-clicking on the middle section of the HTML5 element offers you the menu with action "Download Video as...".
Despite the label, it downloads the audio source of the HTML5 element fine. Note that I tested it only for a wavefile.
Related
Would like to have an MP3 track play in the background immediately after a HTML/CSS/JavaScript page is loaded.
So far, only able to have a player with controls at the bottom of the page:
Bottom of webpage
using the following code:
<audio id="bg_music" class="audio" controls loop>
<source src="audio/silent-night.mp3"
type="audio/mp3">
Your browser does not support the audio element.
</audio>
Would like to find a way to have the MP3 file play automatically after the browser (Chrome) loads the webpage.
Thanks,
Benjamin
You need to add an attributed autoplay, and it will be done. You may additionaly provide value autoplay=true or autoplay=false, but still if you don't give it, it will automatically consider it to be true if you just add the attribute.
<audio id="bg_music" class="audio" autoplay controls loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
I am trying to add audio in my code
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
and above code is working fine.. but i am facing problem if audio is quite big. i have to wait for couples of second to listen the audio,
is there is any alternative for the same so we can play audio instantly without any wait?
I found one solution , see if it works :
You can use the following property of audio element to solve your problem!!
Preload hinting:
You can optionally use the preload attribute to give the browser a hint as to whether, and how, it should preload the audio file when the page loads. Preloading the audio file means it can play instantly when the user hits the “play” button, which is a nicer experience for the user.
<audio preload="auto">
<source src="WhiteChristmas.mp3">
<source src="WhiteChristmas.ogg">
</audio>
Refer this site:
https://www.elated.com/html5-audio/
you could try to check the spelling...i to had this problem but when i checked and corrected the spelling of the file,it loaded instantly.The code is:
<audio controls
Your browser does not support the audio element.
flowplayer html5 5.4.6
chome 35+
in flowplayer html5, on chrome i kept getting html5: video encoding not supported or html5: video not found.
I load flowplayer via javascript and have a playlist defined like so:
$(function () {
$('#fp').flowplayer({
playlist:[ [
{ webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
{ mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],
splash: true
});
});
i checked the video format of the mp4 and all was well. I can even drag and drop the mp4 into chrome and it plays np.
in chrome dev tools i opened the network tab and can see that it tries to open the webm file, get partial content, then cancels the get get.
it never tries to load the mp4 file.
So i tried reversing the order so that mp4 was the first in the playlist.
voila. video plays no problem.
I also tested in firefox and it works without issue.
The question is, why does flowplayer html5 on chrome fail if webm source is specified first in the playlist?
='(
take a look here
i hope this helps you
the browser checks what works but it looks from top to bottom so if the first works for him he wil use it so change the order and it suppose to work
to give an example to you
<div class="flowplayer">
<video>
<source type="video/webm" src="http://example.com/intro.webm">
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
now webm will go first,
if you change it to:
<div class="flowplayer">
<video>
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/webm" src="http://example/intro.webm">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
.mp4 go first.
I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>
I`ve searched the article and the following code works fine on desktop chrome.
But it failed on Android with chrome.
The toolbar has showed, but the play button was disabled.
HTML5
<audio controls>
<source src="sample1.mp3" id="audio_1">
</audio>
JS
$('#audio_1').attr("src","sample2.mp3");
$('#audio_1')[0].load();