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.
Related
I am working on a website in which I am displaying audio/video content. For videos I am using HTML5 video tag. However, in case of audio, I need to play the audio as well as show an image in the audio player. Is there any html5/javascript player that supports showing of image in the player while playing audio content?
<audio controls>
<source src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Cranberries/Cranberries%20'Dreams'.mp3" type="audio/mpeg">
</audio>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg">
<video> and <audio> tags are almost identical, <video> tags have no trouble playing audio files. Use the poster attribute to display an image.
Demo
<video controls autoplay poster='https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg'>
<source src="http://home.saske.sk/~slavo/Audio/FOLK/Cranberries/The%20Cranberries%20-%20No%20Need%20To%20Argue/10%20-%20The%20Cranberries%20-%20Dreaming%20My%20Dreams.mp3" type="audio/mpeg">
</video>
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 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.
So videos is used a lot in websites
you can put a video into your website using this html code
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
But the media player that will appear is different from the media player in youtube.com (for example)
My question is how do i write a media player for my website?
The native controls vary from browser to browser. YouTube does not use the native controls, it uses a custom set of controls that tell the video to do things like play, pause, set volume etc..
Sites like Youtube use Flash. The ones built into the browsers (non-Flash) are likely C or C++. Maybe some Objective C in Safari.
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>