We are looking for a code that plays music only on one topic

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!

Hello,

It is very possible and quite easy to do. This code should do the trick:

Code:

var tid=100;
var file="http://soundbible.com/grab.php?id=2079&type=mp3";
if(location.pathname.indexOf("t"+tid)===-1) return;
document.addEventListener("DOMContentLoaded", function(){
var body=document.querySelector("body");
var audio=document.createElement("audio");
audio.setAttribute("src", file);
audio.setAttribute("controls", "");
body.appendChild(audio);
})


Also add this CSS to make the element stay at the top of the page:

Code:

audio{
position:fixed !important;
top:0 !important;
right:0 !important;
}

The number on the first line of the first code(100) is the id of the topic and you can find it in the topic's url. For example, this topic's url is https://help.forumotion.com/t157903-we-are-looking-for-a-code-that-plays-music-only-on-one-topic#1095887, where the bold part is the id.
The second line is the url to the sound file. If the code doesn't work, please leave it enabled so I can see what went wrong.

Hi Occultist, thank you again for your help !

So we tried, and it doesn't seem to work ! The code was put as a new java script : http://prntscr.com/p1wbqj

What do you think is the problem ? Here is the topic we wanted the music on : http://continentem.forumactif.com/t563-la-forge

(For now we used your music link, believing the problem was our youtube link, so is it possible with a youtube link anyway ?)

And last add : our forum is on ModernBB, Lusuce didn't know about the different forum logos !

Try all pages, not just in topics.

SLGray wrote:Try all pages, not just in topics.

Just tried it, still not working hmm

Do you have JavaScript Management activated?  I asked because I do not see the script in the page source.

Strange... Because we do : http://prntscr.com/p1wg4h

Did you add the CSS to your CSS stylesheet?  Also did you add your own music to the JavaScript?

Here for the CSS : http://prntscr.com/p1wnxc

And we tried with a youtube link, then with the link Occultist provided. In both cases : it doesn't work

I made a slight error. See if this works:

Code:


;(function(){
var tid=563;
var file="http://soundbible.com/grab.php?id=2079&type=mp3";
if(location.pathname.indexOf("t"+tid)===-1) return;
document.addEventListener("DOMContentLoaded", function(){
var body=document.querySelector("body");
var audio=document.createElement("audio");
audio.setAttribute("src", file);
audio.setAttribute("controls", "");
body.appendChild(audio);
})
})();

As about youtube videos, you will need to download the audio file. You can find a lot of services that do this online. For example, this one:https://ytmp3.cc/

After downloading it you need to upload it somewhere. Again, you can find online services for this too or I can do it for you if you post the link to the youtube video here.

Not working yet, hmm am I doing it right : http://prntscr.com/p2q8zl ?

Ok for youtube videos, I will do it this way then, had done something similar in the past, so I know how to, but thank you for the proposal

Try adding a

Code: ;

exactly at the end of the code(no spaces). Forumotion compresses the javascript code, which is a good thing but can lead to some issues.

http://prntscr.com/p2r0eo

Like that ? Not working

You have this code in one of your javascript files:

Code:

< img src = "https://image.noelshack.com/fichiers/2018/36/2/1536091220-barre-aard.png"
width = "40"
height = "12"
alt = "1/5"
style = "object-fit:cover;" >

That is html code and it needs to be removed for other javascript codes to work.

Done, but no changes seen hmm

Edit : + other scripts were working anyway with the html code ; like the script you made for the changing backgrounds

You can see the audio player at the bottom of the page. Adding the CSS code from my first post should move it to the top of the page.

Oh... Yes, it's actually there !! But hum, the script is already in the CSS : http://prntscr.com/p2rl4a ; so maybe there is something wrong ?

And by the way, is it possible to personalise the look of the player ?

The css code doesn't appear in the css file(http://continentem.forumactif.com/32-ltr.css). Are you sure you added it?

The player can be stylised, but different browsers have different default styles for it. Some may even not allow modification of that element. A workaround to this would be making a custom player. Let me know if that's what you want.

I added it in the CSS sheet, I don't know if it's correct hmm ?

And yes, that's what I'd like to have, a player in the theme of the forum, maybe I should make a request in the graphic section ? Or just find an appropriate image in the web haha

I'll work on making a custom player and we'll see about the design after I finish that part. Do you need to be able to modify the volume for the player and to be able to skip to a certain part?

Also, the CSS code still doesn't appear, but we'll see about that after.

Would be great to be able to modify the volume, while skipping isn't necessary !

Thank you very much, and I don't know why it doesn't go for the CSS code, because it's there in fact

Did you click the submit or save button on the CSS stylesheet page?  You have to click the submit button when adding CSS to the stylesheet.  If you are changing the option below it, you click the save button.

We never forgot to save or validate any modifications. It must be something else that’s causing us problems.

Please post a screenshot of your CSS stylesheet.  Also upload it with editor (host an image button).

https://2img.net/image.noelshack.com/fichiers/2019/36/5/1567797088-9e2bf0e0-3be2-4242-9b6e-da01f0327f48.jpeg

Is that what you asked for? Sorry if it’s not! Could you detail your needs if so? As I said, none of us are native speakers so sometimes there can be misinterpreations.

Add the CSS code to the top of the styelsheet,

That works, but the player is there : http://prntscr.com/p2vcxc

Not usable aha

In the CSS code, change the zero in the top line until you get what you want.

I mean this:

Code:

top: 0 !important;

That does work ! Thank you !

I'll wait for Occultist code, before putting the topic as solved, thank you guys !

You can try this SCM Music Player