I've been looking around for a method to embed audio onto a website, have a capability to loop and autoplay and also be able to mute and unmute the audio with javascript. I know that this is possible and very easy in html5, but I've heard that IE doesn't support html5 yet (or the audio tags perhaps).
I also need my embedded audio to work as far back as IE7. So i think that using the tags will work for all other browsers but IE, while I was hoping something like could work for IE; unfortunately, it doesn't support calls from javascript to mute and unmute - this is because I don't want any controls from the audio player to be visible; simply a custom sound button that the user can click to mute and unmute the audio. Any ideas? Seems that something like this is the most simple thing, but the hardest thing to code :/
Consider using a player that uses HTML 5 by default, but can fall back on Flash if it's not supported.
JPlayer can do that, and has a mute function.
HTML5 is your best bet.
<audio>
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mp3" />
<!--
You can put a flash player here in case the users browser doesn't support HTML5 or any of the audio formats you have added.
-->
</audio>
the attributes you might want to specify in the audio tag are controls='controls' to enable playback options like play pause and volume controls including mute; loop='loop' to enable auto-loop; autoplay='autoplay' obviously to autoplay; and preload='auto' to load the audio on page load (you can also specify "metadata" or "none")
your player would probably look like:
<audio preload='auto' autoplay='autoplay' controls='controls' loop='loop'>
<source src="yoursound.ogg" type="audio/ogg" />
<source src="yoursound.mp3" type="audio/mp3" />
<!--
Flash player here to fall back on if the users browser doesn't support HTML5
-->
</audio>
Related
I almost made it so I can have background music but when I go to my localhost it just downloads the music instead of playing it but in the full path one it plays it in the background so how can I prevent this from happening so it won't download in localhost?
Here is the code for it and the file name is actually "Sound.mp3" as well.
<embed src="Sound.mp3" autostart="true" loop="true"width="2" height="0" controls>
Any ideas of what do add to make it just play and not download?
I am actually working on a page that looks pretty cool and wanted to add background music cause it is actually an "under construction" page and wanted to make it look cooler with background music.
The prefered way of adding audio in Html5 is to use the audio element.You can achieve them by using the following codes,
This code will play the Sound.mp3 file with the controllers displayed for the user. So the users can control the background music. With the autoplay attribute, the music will start automatically.
<audio controls="controls" autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
If you don't wanna show the controls, you can simply remove the controls attribute. As follows,
<audio autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
But the song will autoplay because the autoplay attribute is added.
Unfortunately, not all browsers support mp3, so it's a good idea to include multiple versions of the file in different formats. As follows,
<audio autoplay="autoplay">
<source src="Sound.mp3" type="audio/mpeg" />
<source src="Sound.wav" type="audio/wav" />
<source src="Sound.ogg" type="audio/ogg" />
<p>This content is displayed by browsers that don't recognize the audio element.</p>
</audio>
Hope it helped. Good luck with your project. :)
More Attributes
loop - Automatically loop (keep playing over and over).
Use Tag to attach the attach the audio file to the html file.
If your audio file is Sound.mp3 then include it in <audio> tag.
<audio controls>
<source src="Sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
or use the below code
<audio src="Sound.mp3"> </audio>
I am using bootstrap to build my website and I would like a little bit of flare added to it. I have read some stuff on here but couldn't find exactly what I want.
glyphicon-volume-up to right of the navbar-header.
music autoplay once site visited
volume default to 50%
switches between glyphicon-volume-off/glyphicon-volume-up (unmute and mute)
You should use the HTML audio tag
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio
You can try it here. Add the autoplay I have above when you go to the link and refresh.
Note: You can also use CSS to hide the audio player and write custom javascript to control the audio with your own buttons.
I have html5 like this
<audio controls class="audioPlayer" >
<source class="iSong" src="1.mp3" type="audio/mpeg">
<source class="iSong" src="2.mp3" type="audio/mpeg">
<source class="iSong" src="3.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I want add jquery for button nextSong because my song always play only last one.
Adding multiple sources to an audio element does not create a playlist, it is to support different audio formats and your browser will simply play the first one it can, which is why you say only the last one is playing.
To have multiple songs you choose between you will have to write some javascript. Here is some information on audio in javascript.
It sounds like you will have to create a separate button for playing the next song, add a click event that changes the source of the audio element and plays it.
There is a simple link
01. The Name of Track
How to play the mp3 file, when user clicks on link? Please help me to find some simple and effective solution.
Thank you.
Thank you for help.
I choosed this solution http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ as the most appropriate in my case.
Use HTML5 <audio>
<audio controls id="linkAudio">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
</script>
Note: As audio is an HTML5 tag, it won't support old browsers, so be
sure before you use it..
Or take a look at this article
Many browsers today (like Chrome and Firefox) will not play MP3 or MP4 files, due to IP restrictions. You can either transcode your files to compatible alternatives, like Ogg, or you'll have to rely on plugins to get universal browser support. One very good option is Soundmanager, which I'm using in a project where transcoding is not an option. It uses HTML 5 playback when it can, but falls back to an invisible Flash movie if the file type is not supported by the chosen browser. It's extremely flexible, but it has a bit of a learning curve. The demos are fantastic though, and provide several types of players that you can probably just drop in to whatever your interface is.
You have several options, you could use the html5 audio tag, which would create a small player that would allow you to play the audio:
<audio controls width="100" height="100">
<source src="some.mp3" type="audio/mp3">
<!-- Fallback for older browsers -->
Your browser doesn't support html5 audio
</audio>
You could also use the embed html tag:
<embed src="some.mp3" autostart="false" id="somemp3" enablejavascript="yes">
Then run the following javascript upon clicking the link:
var snd = document.getElementById(somemp3);
snd.play();
Or you could use the embed method for browsers that don't support html5 audio, by putting the above code within the audio tags, and it will show up only if the browser doesn't recognize the audio tag
You could also use a flash audio player.
Play Audio
<audio>
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>
Using jQuery:
$("a").click(function() {
$("audio").play();
});
In my app, there is an audio tag, playing a MP3 file. When I minimize the app, the audio stops. So, I want to know how to keep it playing.
PD: I use JavaScript.
See this post on the win8 developer blog. It discusses (among other things) the background audio support in Windows 8.
As described in this article:
http://msdn.microsoft.com/en-us/library/windows/apps/hh452730.aspx
You can add the msAudioCategory attribute to your <audio> tag for more functionality.
For example:
<audio msAudioCategory="BackgroundCapableMedia" controls="controls">
<source src="song.mp3"/>
</audio>