PDA

View Full Version : Background music code



JRR
06-18-2014, 03:25 AM
I've did a search here and came across several old background music javascript codes but really didn't like any of them. What I would really like is a very simple code that allows me to put it on my forum/s in the main header that will play the music I select on all categories or boards or if I choose to do so just put it in a single board header or footer.

I don't want a pause, stop, play or any other button, and it can be made to just play one link that I choose such as a wav or mp3 link. If I want to change the music I can simply change the link.

Can someone point me in the right direction here?

Thanks

mlegg
06-18-2014, 11:52 AM
You should look at JPlayer (http://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0CB0QFjAA&url=http%3A%2F%2Fjplayer.org%2F&ei=wnyhU9HZKYvfsASw7ILYDw&usg=AFQjCNG74E7zSdfVFrK9qo7b1PK_MEajhg&sig2=myiFEp27IKzdbWyAKf6kdA)

example how to play in background (http://jplayer.org/latest/quick-start-guide/example-audio-soundtrack/)

jscheuer1
06-18-2014, 02:19 PM
I would add that you might not want any buttons, but I can guarantee that your users will want a stop button.

See also:

http://www.dynamicdrive.com/dynamicindex11/html5audioplayer.htm

JRR
06-19-2014, 10:26 PM
Love the Jplayer but a little confused as to how to make it work? Tried putting it in just a footer of a test forum with no luck. Also John this music will be a isolated background music sound and not for the general public of the forum in general so again I want no buttons.


So this is the Jplayer code:




<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
mp3: "http://www.jplayer.org/audio/mp3/Miaow-snip-Stirring-of-a-fool.mp3"
}).jPlayer("play");
var click = document.ontouchstart === undefined ? 'click' : 'touchstart';
var kickoff = function () {
$("#jquery_jplayer_1").jPlayer("play");
document.documentElement.removeEventListener(click, kickoff, true);
};
document.documentElement.addEventListener(click, kickoff, true);
},
loop: true,
swfPath: "/js"
});
});
</script>
</head>
<body>
<div id="jquery_jplayer_1"></div>
</body>
</html>


Now I don't think I need the <head> and <body> tags for a header or footer code? An example, here is a javascript code I use for a blinking text name in the mini profile of members:




<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>


That goes in my global footer and then I put this in the mini profile templates to make it work in that area:




{if $[user.is_online]}<br /><span class="italic"><blink>Member is Online</blink>{/if}



So is this Jplayer code similar? If not what do I do to make it work?