If I have an html5 audio element with multiple sources, is there a way I can specify which source should be used when the user wants to download the file vs playing it in the browser (or achieve a similar effect with javascript)? For example, if I have two files, test_file.opus and test_file.mp3, can I signal the browser to play the opus file when the user clicks play, but then to download the mp3 file when they right click and select "save audio as". Typically opus audio files can be smaller, but they can't be played very easily unless the user knows what they're doing.
<audio controls preload="metadata">
<source src="test_file.opus" type="audio/ogg; codecs=opus">
<source src="test_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Quick Note: I realize I could provide a download link in an <a> tag next to the html5 audio element. I was just curious if there was a way to signal the browser which one should be downloaded vs played in the browser or if there was a way to achieve a similar effect using javascript.
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
I have a .wav file that is being continuously appended to. Is it possible to play this file using the HTML <audio> element? Here is my current approach:
<audio controls="controls" autoplay="autoplay" preload>
<source src="stream.wav/" type="audio/wav">
</audio>
If I refresh the page, it reflects the new audio available in the file, but it does not render as a streaming player. It seems like it should be playing in "live" mode according to this question.
I would also be open to using some kind of framework or JavaScript to accomplish this if that would be best practice, but I haven't found anything yet.
Files cant end in /
src="stream.wav/"
Should be src="stream.wav"
In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#Server-side_Streaming_Technologies
That section of that page lists a few popular options for doing this.
When using html 5 video tag, does the preload="metadata" attribute load the video already? I'm a bit concerned about the performance issue on page load is should the video size be greater than 100MB.
I notice that when having this attribute, an image of the very first second of the video is loaded but does not exactly play the video.
<video width="320" height="240" controls preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The preload attribute provide a hint to the browser about whether optimistic downloading of the video itself or its metadata is considered worthwhile.
The metadata won'y download all video immediately only the meta data.
The specification advises it to be set to metadata.
Here a list with all the options available:
none - Hints to the browser that the user likely will not watch the
video, or that minimizing unnecessary traffic is desirable.
metadata -
Hints to the browser that the user is not expected to need the video,
but that fetching its metadata (dimensions, first frame, track list,
duration, and so on) is desirable.
auto - Hints to the browser that
optimistically downloading the entire video is considered desirable.
More information: https://developer.mozilla.org/en/docs/Web/HTML/Element/video
As per spec, it shouldn't download the whole video, only the metadata, but WebKit browsers apparently do preload the whole video before the metadata.
I hope this helps.
Also see: Problem retrieving HTML5 video duration
It depends on the browser and device.
Chrome buffers 25 seconds of video on desktop but none on iOS or Android.
This means that on mobile, there may be playback startup delays that don't happen on desktop: https://developers.google.com/web/fundamentals/media/video#preload
Maybe I'll put my 2 cents...
The solution that is allways works for me is to set "autoplay" "muted" options in VIDEO html tag. Then, when the page has fully loaded i pause, unmute and rewind the video in JavaScript before the video is shown. God... what would we do without JS. HTML lacks some stable cross browser options sometines :) Hope this helps someone.
So I have a basic audio element. Say I have a single mp3 source. I'm using Firefox. The browser sees the audio tag, likes it, places the controls as directed, but doesn't like any sources, so it doesn't load any audio, but still ignores the default items that a lesser browser would have displayed.
Sadly I'd prefer the browser actually display the default items at that point (say a link to download the mp3) rather than than display the non-working audio controls. Since there is no AudioElement.stuffThatsNotSRC, how do we do this?
So what I do is have a checkSources() that fires onLoad that looks at the networkState and if it finds the 0 or 3 it then goes to a HTML span I have around the audio control and replaces its inner HTML with the non-source stuff that was inside the audio tag.
Is there a better way to do this?
Use the source tag to define multiple file types.
<audio controls="true">
<source src="demo.mp3" type="audio/mp3">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.aac" type="audio/mp4">
<!-- If no support at all. -->
HTML5 audio not supported
</audio>
http://msdn.microsoft.com/en-us/library/gg589524(v=vs.85).aspx
Is it possible to play a shoutcast/icecast stream using HTML5?
If so, how should I implement it?
2020 update
Modern browsers don't need any special treatment or server-side workarounds to play audio. Simply use an audio tag with a direct link to one or more stream sources (not a playlist):
<audio>
<source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>
From MDN:
The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
Browsers support flac, mp3, vorbis, aac, opus and wav. More details on caniuse.com.
Original post
Add a semicolon to the end of the http request. It IS the protocol set forth by shoutcast to override it's browser detection. Like this:
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
There is a big problem with SHOUTcast, which I suspect is responsible for it not working even in Chrome which is supposed to support MP3.
SHOUTcast can serve three different types of response:
a native-SHOUTcast “ICY” protocol streaming audio response. It decides to do this if the player accessing the stream includes an icy-metadata: 1 header.
a plain-HTTP streaming audio response, without extra metadata, for media players with no ICY support.
the “SHOUTcast D.N.A.S. Status” page and other pages on the web interface.
How does it decide whether to serve a web page instead of an audio stream? It guesses whether you're using a web browser. By looking to see whether the User-Agent header starts with Mozilla/.... Because all web browsers are Mozilla, right? Jeez, SHOUTcast.
So when Chrome tries to fetch the audio stream to play, SHOUTcast thinks it's a web browser (well... it is) and refuses to give it the audio stream to put in the audio tag. Instead it gets the admin web page.
(I would guess Safari is passing the icy-metadata header to avoid the problem, having specific support for SHOUTcast. I can't test it at the moment as Safari won't play audio or video. Maybe it wants me to install QuickTime for that. Maybe it can go get stuffed.)
So you'll probably need to add a Flash audio player as fallback.
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>
This should work fine, but make sure /; is there after the stream URL and port. If you don't need autoplay, remove the "autoplay" tag.
Yes. But its only work in Safari
<!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>
Cause Opera and Firefox did not support non free Codecs
see here: Is it possible to play shoutcast internet radio streams with html5?
On redirecting problems with <audio> tag in Browsers try to add "/stream" at the end of the stream URL for preventing redirecting.
example:
not working:
http://live-radio01.xxxxxx.com/2TJW/mp3
working:
http://live-radio01.xxxxxx.com/2TJW/mp3/stream
I use Icecast with Easystream for streaming to both mac and pc. A Script Sets up the audio player called MP3 Sticky Player. swf
With the documentation support files the player just loads as below in both cases.
PC
<ul id="playlist" style="display:none;">
<li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
</li>
</ul>
MAC
<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
Your browser does not support the <code>audio</code> element.
</audio>
As we have removed images from any mp3 metadata we use a image loader that grabs the Icy-MetaData (FYI you will need at least PHP 5.4 to run correctly) and matches a directory of cover art for each players song that streams.
On Chrome 9x If your website works over https Your link for shoutcast stream url must be a https url, for example:
<audio controls src='https://ssl-1.radiohost.pl:7028/stream' type='audio/mpeg' align='cemnter'>
Your browser does not support the audio element.
</audio>