I need to play a mp3 audio file when the user clicks on a image. I only want to audio to play, i.e. there should be no controls, widgets, etc. Nor should the browser launch an external application.
Edit: ok, I might be able to try out flash. recommendations for a lightweight flash player?
Now there's a way to do it. Put this: <audio src="sounds/game-welcome.mp3" style="display:none;" autoplay> (Replace sounds/game-welcome.mp3 with your file)
You could do this:
<embed src="blah.wav" autostart=false loop=false>
... but playing sound without flash is evil and will lead to issues cross browser even if there is some solutions.
You could also use HTML5 and the audio tag:
<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
... but this won't be supported by all browsers.
EDIT: For a flash player you could use this one or this very simple one... there are tons! Try out examples and see what's best for you.
I'm not sure if you can still benefit from these, but SoundManager 2 and jPlayer are two easy to use audio players. Both are instantiated using JavaScript, call a Flash file behind the scenes, and can be styled using HTML and CSS.
Let me correct this. With HTML5 .ogg file will play in FireFox only. Adding Controls element will display controls, to hide controls simply do not add controls element, but again it will only work in FireFox with .ogg file. FireFox does not support MP3 files in HTML5, only Chrome and Safari so far, may be IE9 will later. Your best bet is Flash. Good luck.
just do this:
controls="false"
it's a boolean value
Related
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.
I have had a look at a couple of players like Flow Player, JW Player and a couple more but I can't get it to work exactly in PHP code.
Is there any way to play FLV within HTML Video Tags?
I know MP4 and OGG files will but the thing that I am working on will produce an FLV file.
You should look at video.js from www.videojs.com I have been using it streaming live video feeds. It mimicks the video tag like this:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>
Works very well for me.
You might consider using some other players that are able to play FLV files; Known browsers (Chrome, Firefox etc...) are not able to run FLV files untill or unless you use some kind of flash player.
If you are using PHP, you might want to use a flash player! Use Adobe Flash Player, don't be shy! YouTube and many other websites use it.
You can also try to stick to the flayers you have already tried.
You can convert videos to MP4 or format of OGG. So that every browser can play the video file using the HTML5 <video></video> tag.
But Remember: Each browser has its own limitaion for playing a video file; you can read browser support here: Mozilla Developer Network
Play it with Flash. I think it is the only way: http://css-tricks.com/forums/topic/how-to-play-flv-in-html5/
You can do it using flv.js or via MediaElement.js (that will use flv.js underneath), although the support is limited to FLVs that contain H.264 video with AAC/MP3 audio.
Use MediaInfo software or your favorite video player to check what codecs are used in your FLVs.
And if you have H.264 + AAC inside, you can also convert it to MP4 losslessly, without reencoding:
ffmpeg -i input.flv -codec copy output.mp4
Technically speaking the HTML5 video specification is codec/protocol agnostic so one could imagine support for flv files could be possible. Problem is: none of the major web browser has implemented it (probably because flv is a proprietary container from Adobe). You will need a flash component to play it back. Either one of the players you mentioned or if you are looking for a standalone free flash player try strobe from Adobe. You can try it here.
If you can produce .f4v files you may have success in renaming them to mp4 and then try and play them in an HTML5 video tag.
I want to play a mp3 audio file in HTML. I don't want to display the whole player with controls like Volume etc.
I just need a play/pause button, Designed by me, not the core design of some player, like yahoo player, or google one.
For example the audio will be autoplay. When a button (probably an image) is clicked it will pause, and when that image is clicked again, the audio will play again.
There are quite few examples here : http://www.w3schools.com/html/html_sounds.asp
Can I control any of them to play/stop from JS code ?
You can use the html5 audio tag. You can specify your own controls for playback.
<audio preload="auto" autobuffer>
<source src="elvis.mp3" />
<source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>
This is a jQuery solution.
http://jsfiddle.net/QPW27/109/
This is what your non-jQuery solution would look like.
var foo = document.getElementById('player');
foo.pause(); //just bind play/pause to some onclick events on your page
foo.play();
Different browsers support different audio formats. You can specify fallback audio versions though. This website has a nice chart of browser support as of July 2011.
Hopefully, in a few years, the HTML5 audio API will be supported accross more browsers, but currently, playing sounds requires either a lot of browser-specific hacks to get things working, or reliance on a browser plugin like flash.
In the meantime, I reccomend using SoundManager2. It's fairly easy to work with and will involve much less headache than doing it yourself.
Audio.js looks like it has the player styling features you're looking for, with a graceful degradation to Flash if the browser doesn't support the new audio API.
You can play audio by using embed tag
<!DOCTYPE html>
<html>
<body>
<p>Play mp3</p>
<p>Play wav</p>
<script src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>
I had been using the flash based JWPlayer 4 with the playlist option. Recently I upgraded to JWPlayer 5 which is claims HTML5 support. The player by itself degrades nicely on mobile devices that support HTML5 but not flash, however it breaks with the playlist option enabled.
So can someone tell me either what I'm doing wrong with JWPlayer 5 and how to get it to work with the playlist option for mobile devices, or perhaps just teach me a better way to set up a video and a playlist with HTML5?
Resources
JW Player and playlist configuration example page
Example of the JWPlayer and Playlist layout:
This is not JW Player specific answer.
Browser's native HTML video tag behaves weird if you replace tags. Instead you should set single src attribute directly in tag. By that way you can change that attribute in DOM. Before changing it, try to pause the playing video first.
I use mediaelementjs.com. It works pretty well.
It doesn't come with built-in playlist feature but you can easily build one by yourself. After all, playlist is just a list of videos that when you click on one, you go change the source of the video.
Media element has setSrc() function that supports both HTML5 and flash fallback. It works from me.
Voila un bout de script pour jwplayer 6.7 et playlist youtube
<script>
jwplayer("myElement").setup({
width: "100%",
height: "400",
playlist: "http://gdata.youtube.com/feeds/api/playlists/PLMIePZMXPqnYlsvE_PFwe-_e336HlJF7g?max-results=50&alt=rss",
stretching: "exactfit",
primary: "flash",
sharing: {link: "http://www.centraltv.fr/egypte-television/rotana-masriya"},
autostart: "true",
listbar: {
position: "right",
size: "220"
}
});
</script>
This isn't answer to your main question. It's just some general tips.
Upgrade. I had some trouble with 5.6 not playing on mobile devices, and upgrading to 5.8 fixed it.
Avoid autoplay at the moment. I've had some issues with the player not loading. It might be due to a timing issue on loading large media files, and javascript trying to begin playing. Also, for linux users with a slower connection (like me at 3mb dsl), when the playhead catches up, and the buffer is empty, the player stops functioning.
Maybe override the mode. For my media, html5 seems to play a little better.
modes: [
{ type: "html5" },
{ type: "flash", src: "/media/player.swf" }
]
Try to use the same height/width as your media.
If you are playing audio only- it can be hard to find the (centered) play button if your width is a large value.
I'm not using the playlist. I have a list of recordings on the page, and a button to load a popup/dialog.
These links might be helpful:
HTML 5 video or audio playlist
PagePlayer
JW Player 5
Generate a Playlist for HTML5 Video
If you are just using YouTube videos, they offer a (beta) HTML5 video player: http://code.google.com/intl/en/apis/youtube/iframe_api_reference.html
I use the HTML5 video player on this site: http://www2.highpoint.edu
And older versions of IE cannot use that player (very well), so I still use Flash embed tags for those browsers instead which are done via the YouTube js api: http://code.google.com/intl/en/apis/youtube/js_api_reference.html
Here is an example page: http://www2.highpoint.edu/youtube.php?id=ht1PrQkE3WU
I highly recommend mediaelementjs if you need to roll-your-own video player. All videos on our site are hosted by YouTube, but we still use it as an audio player, as seen here: http://www2.highpoint.edu/president.php?mp3=http%3A%2F%2Fwww2.highpoint.edu%2Fmp3%2FNQ_LI013107.mp3
JWPlayer's last version supports HTML5 playback as well. Now it can also be used in mobile devices that do not support flash.
Another HTML5 video player with flash fallback is videoJS ( http://videojs.com/ )
swf is not supported by mobile device
i think this is useful but need two type file
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" /> <!-- for iPad :) -->
<source src="movie.ogg" type="video/ogg" /> <!--for windows -->
Your browser does not support the video tag.
</video>
and i try javascript to change movie and it worked in both
you must be use this because i have an ipad and i cant open the swf based video player's video
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>