Jump to content
vBWarez - Rest In Peace

Add background music with hideaway player.


Recommended Posts

Much like the older days of HTML embedded background music, one can add a background music with player to vBulletin.
Many options exist to perform such a feature, but I am presenting a CCS3 method.

This code will add an icon in the lower left corner of your browser.
[img]http://s32.postimg.org/61g1hplnl/icon.jpg[/img]
When mouse pointer hovers over icon, player menu appears.
[img]http://s32.postimg.org/qf33c88dh/hover.jpg[/img]

AdminCP
Styles and Themes / Style Manage
Select your Style and chose Edit Template
Scroll down to CSS Templates, double click to expand
Scroll down to CSS Aditional, double click

Copy this code-
[CODE]/* Start Background Music Player CSS */
<style media="screen" type="text/css">
#backgroundaudio {
display: block;
position: fixed;
bottom: -43px;
left: 5px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#backgroundaudio:hover {
bottom: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#backgroundaudio audio {
background: #000000;
padding: 5px;
display: table-cell;
vertical-align: middle;
height: 43px;
z-index: 9998;
}
#backgroundaudio i {
font-size: 40px;
display: block;
background: #101010;
padding: 5px;
width: 50px;
float: none;
margin-bottom: -1px;
z-index: 9999;
}
</style>
/* End Background Music Player CSS */
[/CODE]

At the end of the CSS Additional editor window, paste the code.
Click Save

Next is tricky part.
Depending upon vB theme being used, you will have to test where best to add this code.
Footer, Header_Include are two top options.

Add this code so it will appear in BODY of your forum.
[CODE]
<!-- Start Background Music Player BODY -->
<div id="backgroundaudio">
<i class="icon-volume-up"></i>
<audio autoplay="" controls="" loop="" preload="">
<source src="[COLOR="#00FFFF"]/Media_Server/Brazil.ogg[/COLOR]" type="audio/ogg"></source>
<source src="[COLOR="#00FFFF"]/Media_Server/Brazil.mp3[/COLOR]" type="audio/mpeg"></source>
Your browser does not support the audio element.
</audio>
</div>
<!-- End Background Music Player BODY -->
[/CODE]

Reload website and music will play.

Note: You need to set location of [COLOR="#00FFFF"]two music files[/COLOR], same music in two formats.

Can be very cool... or really annoying, especially if using loop.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...