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>
Related
I want to style HTML5 Audio like this
<audio controls>
<source src="#Model.Audio.Mp3.Url" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The above code creates the following audio
Has someone done similar styling or is it possible to do this styling in HTML5 audio player
Any suggestions would be appreciated
Unfortunately not in a cross browser solution as they are built natively. There are a lot of -webkit- based psuedo elements that you can target for styling but those only work on webkit based browsers (eg: This won't work on Firefox/IE/Edge). However, you can utilize the audio API and there is a good answer on this duplicate SO question about using the JW Player which is a wrapper around this API and gives you styling control.
Is it possible to style the width of the HTML5 audioplayer in %?
I tried it, but I found no solution.
No, it isn't - at least not reliably across browsers and OSs. Every browser (or mobile OS) has its own design for the HTML5 audio player / audio tag, and most of them won't react to any attempts to change it via CSS at all.
One way to work around that is to use the jQuery plugin "jPlayer" (http://jplayer.org/) which uses HTML5 audio wherever possible, has a Flash fallback option, and has its own default "skin". But it also allows you to build your own skin for it. That requires really getting into its structure (i.e. learning by trying), but once you've understood it, it gives you quite some freedom to create your own audio player design.
If I understood it correctly, they hide the default interface of the HTML5 audio player and set up a HTML/JS structure which accesses the available JS events controling audio playback. Those html elements have classes which then can be styled by yourself via CSS rules.
In 2016 most browsers support simply applying CSS width %:
audio {
width: 80%
}
<audio controls id="player" src="https://ia801009.us.archive.org/4/items/BeatlesGreatestHits/02%20With%20a%20Little%20Help%20From%20My%20Friends.mp3">
<source src="" type="audio/mpeg"><br>
</audio>
Tested on Firefox & Chromium
<audio controls id="player" style="width: 80%;">
<source src="" type="audio/mpeg"><br>
</audio>
OR in your stylesheet you can give a width to the "player" ID.
<style>
#player { width: 80%;}
</style>
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 there a ready to use code or some sort to enable the fullscreen button on Safari for the ?video? Currently when the video is loaded, and click on it doesnt work.
<video width="320" height="240" controls="controls" name="media" src="urlvideo">Text</video>
What types are supported for the video tag?
Do i need to use type=audio/mp3 for playing mp3 and type=audio/wav etc....?
By they way, the video ui looks different on each browser or not working at all... is there a way to have them all the same look and feel and have them all work on all browsers?
purely css, you can target it with video::-webkit-media-controls-fullscreen-button{}, and you'll want to reference this http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/mediaControls.css
To play video when user clicks on it:
document.querySelctor('video').addEvenetListenr('click', function(){
this.play()
}, false);
To have fullscreen use Webkit and Gecko full screen API
First, not all browsers have the same video codecs, so not all browsers can play the same videos. I would suggest looking here to choose a format that is supported by the browsers you are targeting:
HTML5 Video Codec Support By Browser
For Safari specifically, I have gotten this JavaScript to work to get a video to play fullscreen:
var vid = document.getElementById('video');
vid.webkitEnterFullscreen();
vid.play();
Also, check out this thread: Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
Hope that helps!
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