First topic message reminder :

Hello everyone. before describing my problem and everything, I just want to make clear that english isn’t my native language, so, sometimes, it can be difficult to understand what I mean. So sorry in advance!

Now, back to the main issue: I’m one of two secondary GM’s (the creator of the forum being the main guy) in a RPG forum (forumactif, french version), and, we wanted to know if it is possible to play a certain music in a certain topic (all the pages of the topic, that’d be handy).

Right now, the best we came with (and it’s pretty bad lmao) is someting that just plays a youtube video. The video pops in the top left corner, and, you just click play, and music plays. But, there are issues with this, and that’s why we come here.

Firstly, we’d like not to have a big square hiding the background of the forum, just a little ”play/pause” button in a corner would do the trick.
Secondly, if the code that plays the music included a fixture that made it able to play the music in all the pages, not just one.

If I was unclear, or you need more info, please ask, I’ll respond when I have time. Thanks in advance, and, I hope someone can find a solution for us.

Thx for reading, and have good day!

I suppose that you have too many characters in your css file and that the bottom gets removed because of that. Unminified, you have 8208 lines, of which 34 are added by default by forumotion, and never used...

Anyway, I think I managed to get a custom player working. First remove all the javascript and css codes related to this issue that you added.

After that, add this javascript code:

Code:

;function query(e){
return document.querySelector(e);
};
function _query(e){
return document.querySelectorAll(e);
};
function listen(elem, event, cback){
elem.addEventListener(event, function(e){
cback(e);
});
};
window.player=window.player || {
config:{
tid:563,
file:"http://soundbible.com/grab.php?id=2079&type=mp3",
struct:"<div class='player-state'></div><div class='player-volume'><span class='player-mute'></span><input type='range' min='0' max='100' value='50'/></div>",
svg_sound:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633 V1.735L5.035,5.367H3.52z M12.059,9c0-0.727-0.484-1.211-1.211-1.211v2.422C11.574,10.211,12.059,9.727,12.059,9z M14.48,9 c0-1.695-1.211-3.148-2.785-3.512l-0.363,1.09C12.422,6.82,13.27,7.789,13.27,9c0,1.211-0.848,2.18-1.938,2.422l0.484,1.09 C13.27,12.148,14.48,10.695,14.48,9z M12.543,3.188l-0.484,1.09C14.238,4.883,15.691,6.82,15.691,9c0,2.18-1.453,4.117-3.512,4.601 l0.484,1.09c2.422-0.605,4.238-2.906,4.238-5.691C16.902,6.215,15.086,3.914,12.543,3.188z'/></svg>",
svg_muted:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633V1.735L5.035,5.367H3.52z'/><path fill='context-fill' fill-rule='evenodd' d='M12.155,12.066l-1.138-1.138l4.872-4.872l1.138,1.138 L12.155,12.066z'/><path fill='context-fill' fill-rule='evenodd' d='M10.998,7.204l1.138-1.138l4.872,4.872l-1.138,1.138L10.998,7.204z'/></svg>",
sv:1,
playing:0,

play:"<svg height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.243,15.155c0,0.845,0.593,1.157,1.317,0.707l9.659-6.041c0.727-0.453,0.722-1.193,0-1.645L4.556,2.137 C3.827,1.682,3.237,2.014,3.237,2.844v12.312H3.243z'/></svg>",
pause:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08 c0,0.83,0.672,1.502,1.502,1.502c0.829,0,1.502-0.672,1.502-1.502V3.455C7.504,2.626,6.831,1.953,6.002,1.953z M12,1.953 c-0.828,0-1.5,0.672-1.5,1.5v11.094c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V3.453C13.5,2.625,12.828,1.953,12,1.953z'/></svg>",
_vol:50,
muted:0,
css:".player-con{background:#000;display:inline-flex;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16);position:fixed;top:40px;z-index:999;}.player-volume input{-webkit-appearance:none;background:0 0;width:100px}.player-volume input::-moz-range-thumb{border:none;background:#fff;cursor:pointer}.player-volume input::-webkit-slider-thumb{-webkit-appearance:none!important;border:none;background:#fff;cursor:pointer;width:12px;height:12px;border-radius:100%;margin-top:-4px}.player-volume input::-moz-range-track{background:#4f4f4f}.player-volume input::-webkit-slider-runnable-track{background:#4f4f4f;height:4px;position:relative;top:-5px}.player-volume input:focus{outline:0}.player-volume input::-moz-range-progress{background:#fff}.player-con>div{padding:10px}.player-state{padding-right:0!important}.player-con path{fill:#fff!important}.player-mute{position:relative;top:2px;margin-right:5px}.player-state svg{margin-top:2px}",
},

elems:{

},

check:function(){
if(location.pathname.indexOf("t"+player.config.tid)===-1) return false;
return true;
},

build:function(){
var that=player;
that.elems.body=query("body");

/*the css*/
var css=document.createElement("style");
css.innerHTML=that.config.css;
that.elems.body.appendChild(css);

/*the fake player*/
var con=document.createElement("div");
con.classList.add("player-con");
con.innerHTML=that.config.struct;
that.elems.body.appendChild(con);

that.elems.state=query(".player-state");
that.elems.state.innerHTML=player.config.play;
that.elems.mute=query(".player-mute");
that.elems.mute.innerHTML=player.config.svg_sound;
that.elems.range=query(".player-volume>input");

/*actual player*/
var audio=document.createElement("audio");
audio.classList.add("fake-audio");
audio.setAttribute("src", that.config.file);
that.elems.body.appendChild(audio);
that.elems.audio=audio;

/*the volume*/
listen(player.elems.range, "input", function(){
var vol=player.elems.range.value/100;
if(vol!==0 && player.config.muted){
player.config.muted=0;
player.elems.mute.innerHTML=player.config.svg_sound;
}
player.elems.audio.volume=vol;
if(vol===0){
player.elems.mute.innerHTML=player.config.svg_muted;
player.config.sv=0;
}
if(vol!==0 && player.config.sv===0){
player.elems.mute.innerHTML=player.config.svg_sound;
player.config.sv=1;
}
});

//play-pause
listen(player.elems.state, "click", function(){
if(player.config.playing){
player.config.playing=0;
player.elems.audio.pause();
player.elems.state.innerHTML=player.config.play;
} else {
player.config.playing=1;
player.elems.audio.play();
player.elems.state.innerHTML=player.config.pause;
}
});

//the mute button
listen(player.elems.mute, "click", function(){
if(player.config.muted===0){
player.config.muted=1;
player.config.vol=player.elems.range.value;
player.elems.range.value=0;
player.elems.audio.volume=0;
player.elems.mute.innerHTML=player.config.svg_muted;
} else {
player.config.muted=0;
player.elems.range.value=player.config.vol;
player.elems.audio.volume=player.config.vol/100;
player.elems.mute.innerHTML=player.config.svg_sound;
}
});

},

init:function(){
if(!this.check()) return;
listen(document, "DOMContentLoaded", this.build);
}
};
player.init();


The CSS code is embedded in the javascript, so no need to worry about that. The placement should be the topics.
Lines 13 and 14 can be modified just like in the previous code. The player can currently play the sound, has volume controls and a mute button. Basically it is the same as the default player, except that you can't skip. Let me know if you need any other feature. The design can be modified however you like.

It works perfectly fine ! Thank you Occultist, and for Sarkz reply, I'll check if they got a player adapted to our theme ! Talking of which, where can I modify the design of the current player you coded ?

The css is currently embedded in the js. Replace the js with this one:

Code:

;function query(e){
return document.querySelector(e);
};
function _query(e){
return document.querySelectorAll(e);
};
function listen(elem, event, cback){
elem.addEventListener(event, function(e){
cback(e);
});
};
window.player=window.player || {
config:{
tid:563,
file:"http://soundbible.com/grab.php?id=2079&type=mp3",
struct:"<div class='player-state'></div><div class='player-volume'><span class='player-mute'></span><input type='range' min='0' max='100' value='50'/></div>",
svg_sound:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633 V1.735L5.035,5.367H3.52z M12.059,9c0-0.727-0.484-1.211-1.211-1.211v2.422C11.574,10.211,12.059,9.727,12.059,9z M14.48,9 c0-1.695-1.211-3.148-2.785-3.512l-0.363,1.09C12.422,6.82,13.27,7.789,13.27,9c0,1.211-0.848,2.18-1.938,2.422l0.484,1.09 C13.27,12.148,14.48,10.695,14.48,9z M12.543,3.188l-0.484,1.09C14.238,4.883,15.691,6.82,15.691,9c0,2.18-1.453,4.117-3.512,4.601 l0.484,1.09c2.422-0.605,4.238-2.906,4.238-5.691C16.902,6.215,15.086,3.914,12.543,3.188z'/></svg>",
svg_muted:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633V1.735L5.035,5.367H3.52z'/><path fill='context-fill' fill-rule='evenodd' d='M12.155,12.066l-1.138-1.138l4.872-4.872l1.138,1.138 L12.155,12.066z'/><path fill='context-fill' fill-rule='evenodd' d='M10.998,7.204l1.138-1.138l4.872,4.872l-1.138,1.138L10.998,7.204z'/></svg>",
sv:1,
playing:0,

play:"<svg height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.243,15.155c0,0.845,0.593,1.157,1.317,0.707l9.659-6.041c0.727-0.453,0.722-1.193,0-1.645L4.556,2.137 C3.827,1.682,3.237,2.014,3.237,2.844v12.312H3.243z'/></svg>",
pause:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08 c0,0.83,0.672,1.502,1.502,1.502c0.829,0,1.502-0.672,1.502-1.502V3.455C7.504,2.626,6.831,1.953,6.002,1.953z M12,1.953 c-0.828,0-1.5,0.672-1.5,1.5v11.094c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V3.453C13.5,2.625,12.828,1.953,12,1.953z'/></svg>",
_vol:50,
muted:0,
},

elems:{

},

check:function(){
if(location.pathname.indexOf("t"+player.config.tid)===-1) return false;
return true;
},

build:function(){
var that=player;
that.elems.body=query("body");

/*the fake player*/
var con=document.createElement("div");
con.classList.add("player-con");
con.innerHTML=that.config.struct;
that.elems.body.appendChild(con);

that.elems.state=query(".player-state");
that.elems.state.innerHTML=player.config.play;
that.elems.mute=query(".player-mute");
that.elems.mute.innerHTML=player.config.svg_sound;
that.elems.range=query(".player-volume>input");

/*actual player*/
var audio=document.createElement("audio");
audio.classList.add("fake-audio");
audio.setAttribute("src", that.config.file);
that.elems.body.appendChild(audio);
that.elems.audio=audio;

/*the volume*/
listen(player.elems.range, "input", function(){
var vol=player.elems.range.value/100;
if(vol!==0 && player.config.muted){
player.config.muted=0;
player.elems.mute.innerHTML=player.config.svg_sound;
}
player.elems.audio.volume=vol;
if(vol===0){
player.elems.mute.innerHTML=player.config.svg_muted;
player.config.sv=0;
}
if(vol!==0 && player.config.sv===0){
player.elems.mute.innerHTML=player.config.svg_sound;
player.config.sv=1;
}
});

//play-pause
listen(player.elems.state, "click", function(){
if(player.config.playing){
player.config.playing=0;
player.elems.audio.pause();
player.elems.state.innerHTML=player.config.play;
} else {
player.config.playing=1;
player.elems.audio.play();
player.elems.state.innerHTML=player.config.pause;
}
});

//the mute button
listen(player.elems.mute, "click", function(){
if(player.config.muted===0){
player.config.muted=1;
player.config.vol=player.elems.range.value;
player.elems.range.value=0;
player.elems.audio.volume=0;
player.elems.mute.innerHTML=player.config.svg_muted;
} else {
player.config.muted=0;
player.elems.range.value=player.config.vol;
player.elems.audio.volume=player.config.vol/100;
player.elems.mute.innerHTML=player.config.svg_sound;
}
});

},

init:function(){
if(!this.check()) return;
listen(document, "DOMContentLoaded", this.build);
}
};
player.init();

Then add this code to your CSS:

Code:

.player-con {
   background: #000;
   display: inline-flex;
   color: #fff;
   box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
   position: fixed;
   top: 40px;
   z-index: 999;
}

.player-volume input {
   -webkit-appearance: none;
   background: 0 0;
   width: 100px
}

.player-volume input::-moz-range-thumb {
   border: none;
   background: #fff;
   cursor: pointer
}

.player-volume input::-webkit-slider-thumb {
   -webkit-appearance: none!important;
   border: none;
   background: #fff;
   cursor: pointer;
   width: 12px;
   height: 12px;
   border-radius: 100%;
   margin-top: -4px
}

.player-volume input::-moz-range-track {
   background: #4f4f4f
}

.player-volume input::-webkit-slider-runnable-track {
   background: #4f4f4f;
   height: 4px;
   position: relative;
   top: -5px
}

.player-volume input:focus {
   outline: 0
}

.player-volume input::-moz-range-progress {
   background: #fff
}

.player-con>div {
   padding: 10px
}

.player-state {
   padding-right: 0!important
}

.player-con path {
   fill: #fff!important
}

.player-mute {
   position: relative;
   top: 2px;
   margin-right: 5px
}

.player-state svg {
   margin-top: 2px
}

You can modify this as you want.

Ok everything fine ! Is there a css code I can add, to have a given picture, as the player ? I mean, like to have this display for example : https://2img.net/u/3715/71/63/56/avatars/1-36.png ?

Replace the CSS code with this one:

Code:

.player-con {
   background: url("https://2img.net/u/3715/71/63/56/avatars/1-36.png");
   display: inline-flex;
   color: #fff;
   box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
   position: fixed;
   top: 40px;
   z-index: 999;
   background-attachment: fixed;
}

.player-volume input {
   -webkit-appearance: none;
   background: 0 0;
   width: 100px
}

.player-volume input::-moz-range-thumb {
   border: none;
   background: #fff;
   cursor: pointer
}

.player-volume input::-webkit-slider-thumb {
   -webkit-appearance: none!important;
   border: none;
   background: #fff;
   cursor: pointer;
   width: 12px;
   height: 12px;
   border-radius: 100%;
   margin-top: -4px
}

.player-volume input::-moz-range-track {
   background: #4f4f4f
}

.player-volume input::-webkit-slider-runnable-track {
   background: #4f4f4f;
   height: 4px;
   position: relative;
   top: -5px
}

.player-volume input:focus {
   outline: 0
}

.player-volume input::-moz-range-progress {
   background: #fff
}

.player-con>div {
   padding: 10px
}

.player-con path {
   fill: #fff!important
}

.player-state {
   background: black;
   opacity: 0.9;
   cursor: pointer;
}

.player-mute {
   position: relative;
   top: 2px;
   margin-right: 5px
}

.player-state svg {
   margin-top: 2px;
}



OK perfect, I got how that works ! Thank you very much again and again, you really are the best !

Is this solved?

I do have a last question : can we recreate as much as we want of this script, or it has limits, because like it might make the forum have lags or something? Or can we add the different topics directly into this code?

Hello,

Right now the code only supports a single topic. Duplicating a code to work with more topics is a very bad idea since it makes the browser download the same code over and over, making the page slower than it needs to. Making the original code support multiple topics is very easy, though. Just replace it with this one:

Code:

;function query(e){
return document.querySelector(e);
};
function _query(e){
return document.querySelectorAll(e);
};
function listen(elem, event, cback){
elem.addEventListener(event, function(e){
cback(e);
});
};
window.player=window.player || {
config:{
ids:[563, 157911, 1],
files:["http://soundbible.com/grab.php?id=2079&type=mp3", "file2", "file3"],
struct:"<div class='player-state'></div><div class='player-volume'><span class='player-mute'></span><input type='range' min='0' max='100' value='50'/></div>",
svg_sound:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633 V1.735L5.035,5.367H3.52z M12.059,9c0-0.727-0.484-1.211-1.211-1.211v2.422C11.574,10.211,12.059,9.727,12.059,9z M14.48,9 c0-1.695-1.211-3.148-2.785-3.512l-0.363,1.09C12.422,6.82,13.27,7.789,13.27,9c0,1.211-0.848,2.18-1.938,2.422l0.484,1.09 C13.27,12.148,14.48,10.695,14.48,9z M12.543,3.188l-0.484,1.09C14.238,4.883,15.691,6.82,15.691,9c0,2.18-1.453,4.117-3.512,4.601 l0.484,1.09c2.422-0.605,4.238-2.906,4.238-5.691C16.902,6.215,15.086,3.914,12.543,3.188z'/></svg>",
svg_muted:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633V1.735L5.035,5.367H3.52z'/><path fill='context-fill' fill-rule='evenodd' d='M12.155,12.066l-1.138-1.138l4.872-4.872l1.138,1.138 L12.155,12.066z'/><path fill='context-fill' fill-rule='evenodd' d='M10.998,7.204l1.138-1.138l4.872,4.872l-1.138,1.138L10.998,7.204z'/></svg>",
sv:1,
playing:0,

play:"<svg height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M3.243,15.155c0,0.845,0.593,1.157,1.317,0.707l9.659-6.041c0.727-0.453,0.722-1.193,0-1.645L4.556,2.137 C3.827,1.682,3.237,2.014,3.237,2.844v12.312H3.243z'/></svg>",
pause:"<svg width='18px' height='18px' viewBox='0 0 18 18'><path fill='context-fill' d='M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08 c0,0.83,0.672,1.502,1.502,1.502c0.829,0,1.502-0.672,1.502-1.502V3.455C7.504,2.626,6.831,1.953,6.002,1.953z M12,1.953 c-0.828,0-1.5,0.672-1.5,1.5v11.094c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V3.453C13.5,2.625,12.828,1.953,12,1.953z'/></svg>",
_vol:50,
muted:0,
file:null,
},

elems:{

},

check:function(){
if(player.config.ids.length!==player.config.files.length) return false;
if(!/t\d+/.test(location.pathname)) return false;
var tid=parseInt(location.pathname.match(/\d+/g)[0]);
if(player.config.ids.indexOf(tid)===-1) return false;
player.config.file=player.config.files[player.config.ids.indexOf(tid)];
return true;
},

build:function(){
var that=player;
that.elems.body=query("body");

/*the fake player*/
var con=document.createElement("div");
con.classList.add("player-con");
con.innerHTML=that.config.struct;
that.elems.body.appendChild(con);

that.elems.state=query(".player-state");
that.elems.state.innerHTML=player.config.play;
that.elems.mute=query(".player-mute");
that.elems.mute.innerHTML=player.config.svg_sound;
that.elems.range=query(".player-volume>input");

/*actual player*/
var audio=document.createElement("audio");
audio.classList.add("fake-audio");
audio.setAttribute("src", that.config.file);
that.elems.body.appendChild(audio);
that.elems.audio=audio;

/*the volume*/
listen(player.elems.range, "input", function(){
var vol=player.elems.range.value/100;
if(vol!==0 && player.config.muted){
player.config.muted=0;
player.elems.mute.innerHTML=player.config.svg_sound;
}
player.elems.audio.volume=vol;
if(vol===0){
player.elems.mute.innerHTML=player.config.svg_muted;
player.config.sv=0;
}
if(vol!==0 && player.config.sv===0){
player.elems.mute.innerHTML=player.config.svg_sound;
player.config.sv=1;
}
});

//play-pause
listen(player.elems.state, "click", function(){
if(player.config.playing){
player.config.playing=0;
player.elems.audio.pause();
player.elems.state.innerHTML=player.config.play;
} else {
player.config.playing=1;
player.elems.audio.play();
player.elems.state.innerHTML=player.config.pause;
}
});

//the mute button
listen(player.elems.mute, "click", function(){
if(player.config.muted===0){
player.config.muted=1;
player.config.vol=player.elems.range.value;
player.elems.range.value=0;
player.elems.audio.volume=0;
player.elems.mute.innerHTML=player.config.svg_muted;
} else {
player.config.muted=0;
player.elems.range.value=player.config.vol;
player.elems.audio.volume=player.config.vol/100;
player.elems.mute.innerHTML=player.config.svg_sound;
}
});

},

init:function(){
if(!this.check()) return;
listen(document, "DOMContentLoaded", this.build);
}
};
player.init();

You will need to edit line 14 to add the ids. The ids should be separated by a comma. You can also leave a comma after the last id, but it isn't necessary.
The next line(15) is the list of audio file links. Similar to the ids, they need to be separated by commas. The quotation marks are also compulsory.
In both cases, just follow the example in the code.

The first id will correspond to the first audio file and so on. The code shouldn't cause any lag, but the forum will load slightly slower because it will have to download the extra code for the player(approx 4.2 kb).

Alright, we did it, everything seems to work! Thanks to everyone who helped us!

Occultist : you the king.

Merci beaucoup !