Any Issues with the Player ? Questions ?
▸ Reply to this comment with it
▸ if it's about the player not working : INCLUDE YOUR CODE / LINK ME THE PAGES
(no screenshots)
Dropbox stopped working. The link is correct, and I did editet it to raw 1. But it doesn't seem to work anymore. Just thought I will notify you about it.
Thanks for notifying actually yes ! I'll put a note on the page when I have time.
Damn tho all hosting methods keep breaking left and right this year...
Yeah exactly, so weird. It's the third time I had to switch hosting sites. Well hopefully file garden will work for a while.
Third time ? Yikes. I feel you I still need to update all my dead discord links on my OCs pages...
File garden seem to be made specifically for that so I have hope for this one at least.
HOSTING WEBSITE EASY WORKING 2024 NO SIGN UP LOL:
RIGHT CLICK THE AUDIO FILE ONCE UPLOADED, THEN CLICK "Copy audio address"
THE LINK SHOULD LOOK LIKE "https://sndup.net/typf/d"
I think the font in your message is a bit too small. /s
That aside, I'll add this methid later probably actually, but it doesn't say anywhere for how long the website keeps the files, so that's a concern.
How long ago did you posted your files and do they still work ?
It was uploaded about an hour ago, and is still up! I have went and searched for other uploaded audio like this and they are also all still up, so I am sure the link is permanent Link for all this: https://toyhou.se/26643227.-
Any Issues with the Player ? Questions ?
▸ Reply to this comment with it
▸ if it's about the player not working : INCLUDE YOUR CODE / LINK ME THE PAGES
(no screenshots)
This user is not visible to guests.
hey !I'm checking if there's a way to fix it but basically (i'm assuming anyway) the symbols in the file name are messing up the link, stuff like, + ) and ] etc
if you rename the file with only letters and spaces, (or only letters to be even safer) then re-upload the file it should works
uh nvm I tested with a file named the same and it does work for me...
have you tested re-uploading it and trying again ? does the link work when you open it alone ?
do we have to have the actual song/audio somehow downloaded in order to use it? an where would i be able to do so
This user is not visible to guests.
Heeeeyyy! So I'm trying to get the music player on https://toyhou.se/19172096.wintry <- this code to loop and I can't figure it out? Any chance you know how? /nf <3
Any Issues with the Player ? Questions ?
▸ Reply to this comment with it
▸ if it's about your player : INCLUDE YOUR CODE / LINK ME THE PAGES
(no screenshots)
Despite trying my damndest i cannot get this to work
my code:
edit: sorry missed the reply thing the first time!
(np thanks for moving the comment!)
umh so, this is what you sent in your first message I beleive... but it works for me ? the song play and all... it doesn't for you ?
<audio controls=""><source src="https://file.garden/ZdIO9uzs_REHyKfv/More%20Than%20Skin%20Deep.mp3"></audio>
im not sure why it wouldnt work for me? thats all i had one it and it just wouldnt play, maybe (hopefully) it will now? thank you much, though!
hey!
There isn't any player on this page I can't do anything if I don't see your code
From your other deleted message in my historic tho, the link you were using doesn't seem to have the right format
there is a list of methods that give you usable links here : https://toyhou.se/6560537.music-player-tutorial-f2u/23831818.hosting-websites
Any Issues with the Player ? Questions ?
▸ Reply to this comment with it
▸ if it's about your player : INCLUDE YOUR CODE / LINK ME THE PAGES
(no screenshots)
All of my players on different characters seem to have broken, do they only work with premium? Changing the links did nothing
it still work on the tutorial itself (and I'm not premium) so it's either your code or your link, show it to me so I can figure out what it is ? (link me the pages)
This one for example isn't working: https://toyhou.se/16987770.crow
Crow | ⚢ | Goth Lesbian Were-Wolf
Jinjer - Pisces
*Gonna change song to Bonehunter - Parasite eve
Ah it's a google link
many people are reporting me their google link stopped working recently, and I've put a warning on it.
I'm waiting to see if the methods really don't work at all anymore to remove it, but it does seems like it sadly.
I tried swaping your link with the tutorial discord link and it works fine so yeah the code don't have any issue.
any other hosting method should work fine >>> https://toyhou.se/6560537.music-player-tutorial-f2u/23831818.hosting-websites
I also need to add "File Garden" which was suggested recently and seem easy to use.
yo does this work on character profiles? i tried to get it into one but it seems to not work :^(
Any Questions / Issues / Other ?
▸ Reply to this comment with it
▸ if it's about your player : INCLUDE YOUR CODE
(in any way shapes or form, txt, link to the page, I'll grab it somehow dw (just not screenshots) )
Hi !
The google method seem to be complelty broken sadly. I was waiting to confirm it does before writting it on the page but it really seems so.
I tested your code with a discord link and it worked, I would suggest your try another hosting method.
I will be adding another soon to the hosting website page that got suggested by someone here and seem simple
hihi!! i just wanted to know if there was a way i could add the color border to the floating code :] im not very code smart (if that makes sense😭) i only know how to edit the code but not add anything :')
Hey!
This should be what you want ?
<div align="right"><div class="fixed-bottom"><audio controls="" style="background:rgb(204, 0, 255);padding:4px; width:270px;height:40px;border-radius:40px;"><source src="MP3LINK"></audio></div></div>
making anything float is super easy tho, just add this part in front of anything :
<div align="right"><div class="fixed-bottom">
*copied from tutorial*
Use either <div class="fixed-bottom"> or <div class="fixed-top"> to chose if you want the player up or down.
Use <div align="left"> and <div align="right"> or <div align="center"> just before the code to chose the placement.
i got it to work but now im facing the issue of the text blending in with the background😭 is there a way to also add a border to the text?
heres the code im using incase you need it to help :]
<div align="right"><div class="fixed-bottom"><table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span style="color: default;">The Court Jester - thquib<br><p><audio controls="" style="background:rgb(204, 0, 255);padding:4px; width:270px;height:40px;border-radius:40px;"><source src="https://media.vocaroo.com/mp3/14RulltQQ2ep"></audio></p></span></td></tr></tbody></table></div></div
maybe that ? I did it very quickly so might be a bit messy but seems to be right
<div align="right"><div class="fixed-bottom"><table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;"><span class="btn btn" style="background:rgb(204, 0, 255); height:15px;font-size:11px;border-radius:4px 4px;padding:0rem;"><span style="color: #ffffff;"> The Court Jester - thquib </span></span><span style="color: default;"><br><p><audio controls="" style="background:rgb(204, 0, 255);padding:4px; width:270px;height:40px;border-radius:40px;"><source src="https://media.vocaroo.com/mp3/14RulltQQ2ep"></audio></p></span></td></tr></tbody></table></div></div>
just a little FYI: Discord changed how their links work, so links off-site expire after a set time. Hosting images through Discord is no longer really an option now for the most part
also, can i suggest File Garden to your hosting websites tab? I've used it since November last year and haven't had any issues with it
thanks you for the warning ! I'm aware of that actually, however :
if you remove the 'expirable' part of the link as explained on the tutorial, it seems to work fine so far.
I do am a bit worried it might not be viable in the futur but, will have to see.
I have no idea what is File Garden thought ? is the processs to grab the mp3 link complex ? If you can explain it I'll sure add it with credit to you !
idk why i expected anything other than a bandaid fix from discord, but that's good to know! I'll have to check my own linked images until i can properly switch them over
File Garden is really simple. just upload whatever file, and it has a "copy url" off to the side of whatever file you select. you can upload other types of files too, but i mostly just use it for audio
hey ! super late but just letting you know I added file garden to the list of hosting website, wondering if the way I credit you is fine or if you want something else ? also if the explaination is accurate cause I haven't tested myself, thanks in advance !
about discord links 'band-aid fix' , tbf them adding the expirable giberish at the end of the links is indeed intended to stop ppl from hosting files there, I'm surprised it's so easy to by-pass if anything. hopefully they'll leave it at that and anyone with more than 3 brains cells will still be able to use discord to host stuff lerl
the credit is fine and the explanation is accurate!
that's what i meant by "band-aid fix" lol. it seems super rushed and that's why it's so easy to bypass. honestly i don't think any of should really be surprised at this point though, discord did cut 170 employees at the start of this year
It doesn't work for you ?
▸ to this comment with your issue
▸INCLUDE YOUR CODE
(in any way shapes or form, txt, link to the page, I'll grab it somehow dw (just not screenshots) )
Hello!!! I'm terribly bad at coding so far and started Toyhouse not very long ago, I'm having trouble making the music player with a custom size and having the hovering text pop up at the same time! My code is probably very wrong so I won't bother copying it here, but other than that everything else works great!!! Thank you so much
Hello !
This should be what you want ?
<p><audio class="tooltipster" controls="" style="width:300px;height:25px;" title="TEXT HERE"><source src="MP3LINK"></audio></p>
but do show your code next time it still might be faster for me to fixe yours than to make it myself
This user is not visible to guests.
No yu good dw 👍 I should add in the comment that any question overall go here too.
Sadly I refrain from recomending specific websites publickly because ;
1) they tend to be terminated somewhat frequenty so you need to find news ones every now and then
2) I personally have adblockers and know where not to clic to be safe, but I don't know how safe it would be for others peoples
3) ... they're kinda all ilegal so...
I'll PM you one tho but shhh
It doesn't work for you ?
▸ to this comment with your issue
▸INCLUDE YOUR CODE
(in any way shapes or form I'll grab it somehow dw (just not screenshots) )
This user is not visible to guests.
hello! sorry if i bother you, i'm trying to make the audio go to the right but i don't really know how help is really appreciated! https://toyhou.se/24468882.cottoncloud https://media.discordapp.net/attachments/1180984399404204212/1181935443072270390/image.png?ex=6582de28&is=65706928&hm=0197fa3aa335b839163ebf676f22720e5e0ce636f947aefc7d155930c13f2afd&=&format=webp&quality=lossless
I cant get the actual song to attach to the code, when i try it ends up as 0:00 and the mp3 link doesnt work. My code:
You used a link to a comment/channel not to the file
> https://discord.com/channels/1183183422693322955/1183961279988240454/1183962663198400663
the link you need to get should look like that (name of the file at the end + .mp3, not you adding it, it being like that when you copy it)
> https://cdn.discordapp.com/attachments/740801737568550913/823631169571651644/SHE_like_the_banana_made_with_ditty.it.mp3
I'm using this code
<div align="right">
<div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span style="color: rgb(162, 255, 0); text-shadow: 0px 0px 15px;"><strong>Enter! Bowser Jr.</strong></span><br>
<audio controls="" style="opacity:0.99; border-radius:40px; background: rgb(255, 51, 0); padding:2px; width:300px; height:35px;">
<source src="docs.google.com/uc?export=open&id1SbozxPs8g68I2CLhsO4-nfWZvQ5iLhZB"></audio>
</td></tr></tbody></table></div></div>
and no matter what I've tried when I press the audio play button nothing happens. it doesn't play, did I do something wrong?
I tested with a discord link and it works, so the code is fine, it's the link that's wrong.
I'm not super familiar with the google doc method (someone else contributed to explaining it) so I would suggest you to try another ?
I did tried to mess around with the google link a bit but it indeed doesn't seem to work.
Neither the one in the explaination actually, so the method might be broken overall but I need to verify.
Hiya !! recentlys used one of the music player code but for some reasons I cant get it to loop? ;w; despite i put the word loop in the audio controls code heres the screenshot w/ the code! https://sta.sh/05tmx1x31fv
heya ! could you link me the page or past me the code as texte so I can check it better ? It's a bit tedious to re-writte it from screenshots...
(it's okay if u put the code here in comment and it turns into the player, i can grab the code from that)
The discord link looks wrong tho might be that ? you need to remove the part after the "?" like explained <here>
sometimes it causes issues.
oh lol you got the same issue as someone else
it's <audio controls="" loop="" not <audio controls="loop"
(yeah i know it looks weird but it's the one that works ahah)
there you go
<div align="center">
<div class="progress" style="width:270px;border-radius:60px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="height:35px;background-color:rgb(182,21,83);">
<audio controls="" loop="" style="mix-blend-mode:screen;padding:5px;width:270px;height:35px;border-radius:60px;opacity:1;">
<source src="https://cdn.discordapp.com/attachments/723673715732381820/1193071362630238268/Cherry.mp3">
</audio></div></div></div>
nice music btw cute
Hi, sorry to bother but the code doesn't seem to work.. And I don't know why, mostly because up until now every single one of them worked perfectly without any issue. I haven't touched the codes since.. I haven't deleted my drive uploads either..i haven't changed my phone.. But all the sudden they are unable to play the music. Neither of them. My codes worked perfectly fine up until now, nothing has changed.. So what happened?
I can't play it.. But I checked and if a not logged in person clicks on the music it still works fine?..
can you link me to the page with the code or give me the code ?
///
well, I went to check around if the code were in an easy place to find like 'main ocs' and sure they were
The "Rodney' one doesn't play for me either, but the "Eric" one does.
I see both have google url, someone else had issue with the google drive method recently, they ended up using another hosting method so it wasn't really resolved...
There doesn't seem to be anything wrong with the code, it's the files url that have an issue somehow
That's strange.. What other hosting sites are there? I can't use discord and I don't have a dropbox.. I don't know why the drive is acting up, it worked without an issue up until now. It's just broke all the sudden..
For me non of the songs play. Not even Eric's voice. Why is that? It works for others but not for me.
What does it depends on in your opinion?
All the options I'm aware of are listed here , can't really recomand you any others, there probably is some I just don't have tutorial/explaination for it.
I'm not a profesional coder or anything so I'm not sure at all
But since it's google, i would assume it have to do with access rights to the files...? maybe country location ? vpn ?
whatever the issue is would come from google refusing to load the file from certain ip or something ?
other possibility would be a specific setting on your TH account ? privacy or censor maybe ?
would need to test with more person and circumstances to tell
like, try on a phone/lapopt, loged in/out, others persons account, using a vpn, etc.
One question : does the player on the tutorial page work for you ? or the one on my profil ?
But if a vpn or location or anything like that.. Then why did it worked perfectly up until now? I haven't changed any setting on th either.
The one on the tutorial page works without an issue. And if a not logged in person checks the sounds then it works too. Most of them.
It doesn't work for you ?
▸ to this comment with your issue
▸INCLUDE YOUR CODE
(in any way shapes or form, I'll grab it somehow dw )
hi I cant seem to find the link that is able to work for it can you help me on how to find one
<div class="row no-gutters" style="border-top:5px solid #C656FF;">
<div class="col mb-3">
<div class="text-center">Ocean Eyes - Billie Eilish ft Blackbear
<div class="progress mx-auto" style="max-width:200px;border-radius:60px;"><div class="progress-bar progress-bar-striped progress-bar-animated" style="height:35px;background-color:#A3EF00;"><audio controls="" style="mix-blend-mode: screen;padding:5px; max-width:200px;height:35px;border-radius:60px;opacity:1;">
<source src="SONG URL">
</audio></div></div>
(re-replying cause my other reply got fucked up sorry)
Hi!
Bit lazy to explain how but fixed it ( I think?), it should works like any other code of this tutorial now (so with any normal mp3 link)
<div class="row no-gutters" style="border-top:5px solid #C656FF;"><div class="col mb-3">
<div class="text-center">Ocean Eyes - Billie Eilish ft Blackbear<br><div align="center">
<div class="progress" style="width:200px;border-radius:60px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="height:35px;background-color:#A3EF00;">
<audio controls="" style="mix-blend-mode: screen;padding:5px; width:200px;height:35px;border-radius:60px;opacity:1;">
<source src="MP3LINK"><br></audio></div></div>
(I don't think the code was from here originally tho... well, 90% of it was, dunno... let me know if it does works now!)
hi there! I was wondering how I could get the text on top of my mp3 player to look like this? like on the original page for it?
i've been trying everything but i haven't been too successful. the code i'm using is below!
<div align="right">
<div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span class="btn-btn primary" style="height:15px; font-size:11px; border-radius:4px 4px;padding:0rem;"><strong>Theme Song - Pink Bxxtch Club by ko.yo</strong></span>
<audio controls="" style="opacity:0.99; border-radius:40px; background:#e6be8a; padding:4px; width:270px; height:40px;">
<source src="song link"></audio>
</td></tr></tbody></table></div></div>
Heyo!
That should be it ? you might wanna re-check the details I might of messed up some, but it's the right color !
<div align="right"><div class="fixed-bottom">
<table style="width:0%;"><tbody><tr><td style="width:100%;text-align:center;background-color:transparent;border-color:transparent;border-style:double;">
<span class="btn" style="background:#e6be8a;height:15px;font-size:11px;border-radius:4px 4px;padding:0rem;">
<span style="color: #ffffff;"><strong> Theme Song - Pink Bxxtch Club by ko.yo </strong></span></span>
<audio class="btn" controls="" style="background:#e6be8a;padding:4px;width:270px;height:40px;border-radius:40px;"><source src="MP3LINK">
</audio></td></tr></tbody></table></div></div>
Let me know if that works !
I know this isnt a issue but I was wondering if I could make https://toyhou.se/23807395.angry-boi The soundbar loop? with this ver of the Music player , I tried to import theinfinite loop command with the soundbar code but it automatically changed the soundbar into a default white instead of keeping the color (is there anyway to keep the blue outline and make it loop?) (oh that uh didnt go as planned i didnt know the code was going to work in comments) :
happy face when i think about how wonderful it all is!
Hello !
saddly there isn't really any fully 'safe' (or legal) place so I prefer not to give any specific ones (the websites tend to be terminated every now and then anyway)
you should be able to find some fairly easily, just beware of the fake download buttons and re-direct links
sorry for not being able to help more clearly, I hope you understand 
👍
It doesn't work for you ?
▸ to this comment with your issue
▸INCLUDE YOUR CODE
(in any way shapes or form, I'll grab it somehow dw )
it's starting to drive me crazy, I do want to help everyone but EVERY TIMES it's just 'doesn't work for me'
what am I even supposed to do with just this hhhhhhhhhhhhhhhhhh 
Discord seem to have recently changed a bit the links you get, it's a simple fix thought :
The link you get might look like that :
▸ https://cdn.discordapp.com/attachments/740801737568550913/1161377407350091786/devil_trigger.mp3?ex=653813ff&is=65259eff&hm=ec55de794c92d7012dcabacc5f5acc2d71f30f15ad0b94116eae9afc950e4c95&
remove the part after the '?' and it'll be all good
▸ https://cdn.discordapp.com/attachments/740801737568550913/1161377407350091786/devil_trigger.mp3?ex=653813ff&is=65259eff&hm=ec55de794c92d7012dcabacc5f5acc2d71f30f15ad0b94116eae9afc950e4c95&
↓
▸ https://cdn.discordapp.com/attachments/740801737568550913/1161377407350091786/devil_trigger.mp3
And there you go !
Hello!! Thank you for making the code
For some reason mine doesn't work qwq
< p class="text-center">SHINING NIKKI | OST #3 Nikki's House Tour - Waltz of Light by Xin Zha
< audio controls="">
Heya ! you're welcome buddy !
yours is missing the second part of the code it seems (also the mp3 file link)
here corrected >>>
<div align="center">SHINING NIKKI | OST #3 Nikki's House Tour - Waltz of Light by Xin Zha<br><audio controls=""><source src="MP3LINK"></audio></div>
hello!
wondering if you could make it a button? similar to this code
Hi!
If you use the custom size one and put it very small it become just a square with an arrow that look like that pretty much
<p><audio controls="" style="width:50px;height:25px;"><source src="MP3LINK"><br></audio></p>
As for actually making a tutorial for a button no that's not the same way of coding and I don't have time to re-do everything
This user's account has been closed.
Sorry to bother you (I tried finding if you'd answered this before, but I didn't find anyone else having the same issue, due in part to having no idea how to word it) -- but I have a version of this code that I'm using from this html code. This here is the snippet from their code, and this here is my edit that I'm trying to use. I left everything as intact as possible, just edited to fit the theme I'm using.
While the music plays when you click the play button on my version, the play button does not switch to a pause button and the little countdown does not begin. This problem doesn't appear in the original code, so, using the original version, I've been able to verify it's not a problem with my .mp3 files. I've obviously done something wrong, but for the life of me I can't figure out what. (I'm VERY new to html, and the code I borrowed this from is a lot messier than I'm used to. For instance, there are seven end dividers at the end of it, which, as far as I can tell, relate to some stylization further up. They just put it in the music player section??)
If you have the time, I was hoping you could take a look at this and see if anything jumped out at you? I'm worried it's a problem further back in the theme I'm using for the character, but I figured there was no harm in asking. The music works, it plays, it just doesn't look right -- and I can tell I've done something wrong, I just have no idea how to start figuring out what it is.
Hiya !
So, when I check your code the button does change and I can't see anything odd visually.... so I'm unsure ? what browser are you using ? the player code itself doesn't seem to have any issues so yeah it gotta be something with the theme or your browser/device
could you send me the page in which it glitch ? cause as an isolated code it seems fine
This user is not visible to guests.
[ Sorry for the late reply I was(still am) crazy busy this summer ]
Hiya! There u go (I think?)
<div align="right"><div class="fixed-bottom"><table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;"><img src="https://cdn.discordapp.com/attachments/520828099126886400/1010618151521767455/unknown.png" class="fr-fic fr-dib" width="263" height="275"><audio controls=""><source src="MP3LINK"></audio></td></tr></tbody></table></div></div>
it looks like this >>>
the "Floating + Centered Name of Song" one but replaced the 'song name' part by the code for an image
feel free to ask if ur unsure how to edit it !
Hi! This isn't working for me :< I'm unsure if it's due to me wanting the code for my userpage and not a character profile
AS A HUGE MUSIC LOVER I JUST WANT TO SAY THANK YOU IN THE MOST SINCERE WAY POSSIBLE. sorry im just rlly happy this exists
Hi! I love your code and I was wondering if there was any way to merge this format with a YouTube player? I used to use this code with discord but switched over to a YouTube based one recently, and my biggest gripe is that the play icon doesn’t switch to a pause icon or give any indication that the song is playing. I would love to switch back over to this format but I don’t want to mess around with downloading songs to my computer through fishy websites lmao
Feel free to ignore if I’m overstepping by asking this! I wouldn’t want to bother you, and I hope you have a great day 🥰
[ Sorry for the late reply I was(still am) crazy busy this summer ]
Hiya ! There for sure would be a way but... that's be a whole other tutorial basically, I don't have the time to do it sadly... I'd suggest just looking for other players that use youtube as a base, there's many i beleive ?
have a nice day !
hello ! I can't tell you what's wrong without seeing the code, send me either the code or the page please
Hello idk why the audio dont play :( I'm on mobile does it must require to be on computer or so? Or I'm just TwT put on wrong places
it should be working on phone just fine as far as I know, to help you I need to see your code/page tho, otherwise I can't see what's wrong with it
Well TwT I think I do it wrong and I already try to put it everywhere but is just not working for me the code does work but when I want to play the song is not working is still 0 and I did try to download on mp3 and sent to discord but it didn't work for me and I think is somewhere wrong with my steps so I'm here to ask
By sending me the code I meant the txt not screenshots- but alright I still can see it.
It's the mp3 link that's wrong, and is also not at the right place in the code (on the first screenshot)
also I'm not sure why but you took the 'tooltipster' code but without the part that actually put the text... so try this one with a discord link there should be no reason it doesn't work
<audio controls="" loop=""><source src="MP3LINKHERE"></audio>
(hope I don't sound rude bit busy so no much time to reply)
This user's account has been closed.
im so happy i found this! i cant figure out how to make the colored music player float at the bottom corner though :,)
Hey, so
Idk what's happened but for some reason some of the audio players I have set up seem to have stopped working
I don't think it's an issue with dropbox since some work
The code was originally way longer (i don't remember what exactly but like <audio="player" "control='on' audio-type='mp3'> etc) and i saw that shortening this way ( just <audio controls="">) made it work just fine, so i put it as shortened as possible on the page.
I could honestly not tell you exactly what it does, but it's like ; what tell the html to make a player in a way ? but as shortened as possible.
hope that somewhat answer the question !
If you want to use the type of player this page offer, I assume you'd need to make a small player (like 30px x 30px) make it transparent and then overlap it with the icon...
Which I haven't done before so I don't have a code for, and not much free time to try and make it right now sadly
But I've seen similar codes around so I can only advise you to search around with tags like 'music player' etc ?
I hope you'll find what you want !
Does there happen to be any way to make the player shrink/resize with whatever box or container that the code is placed into?
Question! How do I get the music player to be center aligned like the rest of my profile things? On my characters profile pages, it still stays to the left instead of centering.
hi there! I am having some trouble with the custom code.. how do i make the player itself something other than white? it only changes the border..
i am very new to coding!!
OH WAIT.. is this due to it being on Chrome? I'm a little confused, like I said it's my first time coding!!
Hi!
Don't worry it IS a bit tricky to get the colour to work how you want, and yes it will look different on Chrome/Firefox.
I can suggest you to use this one tho ? It should look pretty similar on both browsers.
<div class="card bg" style="background: rgb(50, 50, 50);width:270px;height:40px;border-radius:50px;"><audio controls="" style="opacity:0.20;width:270px;height:40px;border-radius:50px;"><source src="MP3LINK"></audio></div>
|
This user's account has been closed.
This user's account has been closed.
Could you show me the exact way you added it ?
I tried and it doesn't work but I might be doing something wrong.
Did you tested the code on an external html website btw ? TH works a bit different with some detail like this so you'd wanna check on TH directly.
You already shared me this find month ago but it wasn't working on TH we figured back then.
Regardless, thanks for sharing the info anyway !
Hello and Thanks for sharing your finds !
The 'difference' one tho is already mentioned on the page, granted it's not the main one displayed but....
As for the Night Mode, The base colour of the player depend on the browser, so what is a night mode for you is a night mode for the Firefox users :
Your exact code on Firefox there :
Do know I really appreciate you sharing those discoveries as the page have a lot of contribution from others people !
I just figured I'd detail you why I won't edit the page with those since you're probably curious
But let's keep experimenting, code explorer buddy 
👍 ✨
This is so lovely! Is there a way to remove the "download" option on the music player under the "..." ? I commissioned music and would like to keep those files to myself. Thank you for this wonderful code!
Thanks you !
As for if it's possible to hide the download button, not that I know of sadly. Someone tried a while ago but it was unsuccessful. (to note that the download option doesn't appear on Firefox btw)
I can suggest making the player size smaller so it hide some of the options, but then it may also hide the volume switch.....
Even if you could hide the download button tho, anyone that really want to get your music could get it anyway, so it wouldn't protect it that much. (accessing the html directly, recording it while it's playing, etc)
I can only suggest using a low-quality or shortened version of the music if you're worry of thieve.
Hope that will help ! 👍
This user is not visible to guests.
welp on my side meanwhile I never use spotify ahah so I don't know much about how it works.
This player work with downloaded MP3 files yes, there is various means to obtain them, some more legal than other so I can't recommand a specific one.
But yes bought MP3 files would work I assume, as long as it let you download the file yourself.
There is lot of music that let you downaload them for free (and legally) tho ? No-copyright music chanel on youtube for example.
I know there is player that work with youtube I've seen around, but Spotify tho I don't know, try looking it up here ? (I just searched the word 'Spotify' and sorted by most Favs)
https://toyhou.se/~browse/search?types[]=0&types[]=1&types[]=2&types[]=3&owner=&designer_type=offsite&designer=&tag_type=all&tags[]=spotify&keywords=&sale_usd=0&sale_points=0™=0&trade_art=0&offer=0&game=0&raffle=0&free=0&humanoid=0&furry=0&feral=0&cs=&price_min=&price_max=&sort=favs
Good luck! feel free to ask if you have any more question ! I'll do my best to help. 👍 ✨
HHHH THIS IS SO GOOD AND EASY FOR ME TO USE-
I love my toyhouse codes i'm using currently, but the ONE thing that i wasnt a fan of is the fact that they didnt have audio players! (i like adding a featured song, to give a mood to a character yknow) LUCKILY I FOUND THIS!! And now i frankensteined them together, and now i have a code i love, WITH AN AUDIO PLAYER!!! TYSM FOR THIS AND MAKING IT SO COMPATIBLE <333333333
You're very welcome!! Do I need to give credit anywhere or is it fine? And if so, how would I go about doing so?
I don't require credit, thought it can be good to put if other people wonder how to get a player too !
you can put this somewhere maybe ? but it's really not required ! (and feel free to change the message etc, but credit this tutorial page, not my username)
<p><a href="https://toyhou.se/6560537.-audio-player-tutorial-f2u-" id="" rel="noopener noreferrer" target="_blank"><span style="font-size: 8px;"><em><music player code></em></span></a></p>
it will look like this : <music player code>
Heya, I was trying to do the mp4 but while the video plays, the audio does not. It's stuck on mute :')
Oh yeah, sorry-
Character: https://toyhou.se/9669835.crossfire
Code: https://toyhou.se/14458414.-ftu-code-holographic
As I thought it seem it's the file itself that doesn't have sound, either you downloaded it without, or it somehow broke when uploading it to discord.
does the file on yur pc/phone actually have sound before uploadng it ?
This user's account has been closed.
You're fine dw
But, I'm not premium so I can't test CSS so.... no idea... it should ?
As for downloading the music I can't recommand you a specific website.
The ones I use have intrusive pop-ups and malicious redirect links, I have blockers for it but I don't know if you do, and I don't wanna link to something that isn't 100% safe.
But just... google ? you should find something pretty easily.
Sorry for not being very helpful with theses questions btw 
How do i get a link for my mp4? I'm trying to do the `mp4 player` and i just cannot figure out how to get an mp4 link that works with that. (these are super helpfull btw!)
This user is not visible to guests.
Hi ! I downloaded the file and even in window player/VLC it cut at 2:24 so it seems it's the file itself that's broken, verify the file is fine/re-download and re-upload it ?
I've never seen this happens before so- But the problem doesn't seem to come from the player (also even if it cut at 2:24 it did looped for me)
Let me know if that fix it !
Additional FILE HOSTING WEBSITE you can Use !
🢒 https://catbox.moe/ 🢐
[ Thanks to Virus-Xenon for the info ! ]
I'll try to add it to the tutorial Page but right now if I open the editor everything break so... might take a while (。﹏。*)
not sure if anyone say this before, but you can use catbox.moe for audio music as well.
I've test it and it seems to work well on my end.
This user is not visible to guests.
This user is not visible to guests.
It should be that ?
<div align="right"><div class="fixed-bottom"><table style="width: 19%; margin-right: calc(81%);"><tbody><tr><td style="width: 100%; border-color: transparent; border-style: double; border-width: 1px; text-align: center;"><span class="btn btn-primary" style="height:15px;font-size:11px;border-radius:4px 4px;padding:0rem;"><strong> ♪ He Does Like ♪ </strong></span><br><audio class="btn btn-primary" controls="" style="padding:4px;width:270px;height:40px;border-radius:40px;"><source src="https://cdn.discordapp.com/attachments/740801737568550913/823631169571651644/SHE_like_the_banana_made_with_ditty.it.mp3"></audio><br></td></tr></tbody></table></div></div>
This user is not visible to guests.
That should be it ?
If you have troubles aligning stuff correctly let me know !
<p> <span class="btn btn-primary" style="height:15px;font-size:11px;border-radius:4px 4px;padding:0rem;"><strong> ♪ He Does Like ♪ </strong></span> </p><audio class="btn btn-primary" controls="" style="padding:4px;width:270px;height:40px;border-radius:40px;"><source src="https://cdn.discordapp.com/attachments/740801737568550913/823631169571651644/SHE_like_the_banana_made_with_ditty.it.mp3"></audio>
It should be that ?
<div align="right"><div class="fixed-bottom"><table style="width:0%;"><tbody><tr><td style="width:100%;text-align:center;background-color:transparent;border-color:transparent;border-style:double;"><span class="btn btn-primary" style="height:15px;font-size:11px;border-radius:4px 4px;padding:0rem;"><strong> ♪ He Does Like ♪ </strong></span><audio class="btn btn-primary" controls="" style="padding:4px;width:270px;height:40px;border-radius:40px;"><source src="https://cdn.discordapp.com/attachments/740801737568550913/823631169571651644/SHE_like_the_banana_made_with_ditty.it.mp3"></audio></td></tr></tbody></table></div></div>
howdy! sorry if this has already been answered somewhere, is there any way to have the colored outline player but with the pop-up text on it? thanks!
Thank you so much for this tut T^T
I’m actually making a playlist using this code. I currently have the players laid out like a scrollable playlist. Is there any way I can make it so that when a song stops playing it automatically goes to the next song? Or if not, is there a way I can make a song player tab where I can use functioning backwards and forwards buttons to easily switch between songs? I appreciate any help ^v^
Thanks !
Sadly I won't be able to help you here. I'm only a beginner in html ad this is beyond my level ;;;;
From some testing I've done before auto-play and such tend to be blocked on toyhou.se, so I would suspect it might not be do-able, but maybe !
I'd be curious to see what you're doing so feel free to show me btw !
I wish you good luck that sound super neat ! ✨
Ahh it’s fine, I don’t know how to code but I’m persistent and a perfectionist so it’s not required :> My whole character code is nearly 2k lines but here is a portion of my playlist section. Here is the layout, it’s extremely broken right now but as they say before the calm comes the storm —> https://toyhou.se/16584431.tao/16588291.new-character-code-in-progress I have my soundtrack and an image together, however I cannot for the life of me get the picture to align horizontally with the player to the left. Any idea how I can fix that? Or is it not possible? Another very annoying problem is that after like 24 hours of putting a song link into the code it’s stops working. If you go to my character site you’ll see that the one song I put there doesn't work. How would I fix that? Thanks for the luck btw I really need it rn T^T Frankensteining like 10 codes together is unnecessarily hard but I love to give myself a hard time apparently 3-3
Hi sorry for the late reply I'm quite busy and I wanna check everything you say carefully to give relevent feedback so- oof-
Oh wow the playlist you made looks super cool !
Would you be okay with it potentially being added to the tutorial page ? with credit of course ! (totally fine if you don't, I'm not quite sure it would fit on the page anyway.) or I would suggest making a page for it yourself ! I think people would like using it !
I see I took so long to reply that ended up figuring out most stuff you asked me thought xd sorry about that... but congrats !
As for the links breaking after 24h it's probably because the hosting website you used purge it's files daily.
The websites suggested on the tutorial page do actually keep the files up forever I believe. (or years at least)
Thought I see you're using youtube now... but it doesn't seem to play for me ?
Hope that help somewhat (a little???) and good luck with frankeistaining ! I do that too, it's quite satisfying when you actually manage to make it works ahah
Hey, I don’t mind you adding it but honestly idk if I can retrieve it from the depths of my history T^T
I ended up doing something completely different and it did what I wanted it to do. The yt links don’t work cause I didn’t add any yet ^^
If I could give the code to you and you can adjust it till it looked decent that would be fine :> pls do credit me though, I lost actual years off my life making that
If I manage to make it fit I'll let you know, I really have some doubt thought since it's detailed/big one... so it's unlikely, but I'll 100% let you know if I do anything with it !
And I really think you should make a page for it though ! I think a lot of people would want to use it, the version you're using currently I mean, it looks super sleek !
This took me ages to format but here!
<div class="card p-3 m-2">
<div class="p-2">
<h4 class="text-uppercase text-muted"><i class="fas fa-music"></i> Playlist</h4>
<div class="container" style="height:385pt;width:100%;overflow-x:auto">
<div class="p-2 p-lg-3" style="overflow:auto;">
<div class="container p-1 m-1 bg-faded" div align="left" style="width:80%">
<div class="container p-0" div align="left" style="height:90pt; width:70%; overflow:auto">
<div class="square" div align="left;center" style="height: 60px; width: 60px;
background: url(https://media.discordapp.net/attachments/985924144854093874/988153843395203122/IMG_5584.png) left no-repeat;
background-size: cover;">
</div>
<div align="right;center">{CRYSTAL CASTLES}-Affection<br><audio controls=""><source src="https://docs.google.com/uc?export=open&id=1JrKLW2VcGiRW_Qr5quHJro5bnUeQIJln"></audio>
</div>
</div>
</div>
<div class="container p-4 m-1 bg-faded" div align="left" style="width:80%">
<div class="container" div align="left" style="height:90pt; width:80%; overflow:auto">
<div class="square" div align="left-center;" style="height: 60px; width: 60px;
background: url(https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=800&q=80) left no-repeat;
background-size: cover;">
</div>
<div align="center">TEXT HERE<br><audio controls=""><source src="MP3LINK"></audio>
</div>
</div>
</div>
</div>
</div>
super helpful tutorial!!
I was doing this on circlejourney.net and it was working, but on toyhouse the audio thing shows up but doesn't actually let you play anything? https://toyhou.se/16595320.wip (the link in question)
<div align="right">
<div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span style="color: rgb(168, 104, 50); text-shadow: 0px 0px 15px;"><strong>Prickly Potions - Trainsg1rl</strong></span><br>
<audio controls="" style="opacity:0.99; border-radius:40px; background: rgb(168, 104, 50); padding:2px; width:300px; height:35px;">
<source src="https://cf-media.sndcdn.com/Pu8KBxoEY9Eq.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vUHU4S0J4b0VZOUVxLjEyOC5tcDMqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNjU1Mjc0OTc3fX19XX0_&Signature=fHdfvHD0mtdlr7vn9qPNSspTvNmwgcWYbXa3pIvGGahwEpBIXXZXHKLn290Oi021~2aJoflH3j9rBAlMlv~AVUCY48S3-dJDpf3USkfVHeqLa3~QaCtbZaI1a4F5-Ae7jMsykqYT52vP-Mf40-boIgw7HVP2D9xtkoGWEeNn-3Nk8ikWXuY72305ztF8QLsMvUkKNk58ZNhcjcfYNIOC1RW1TAhkzgtSgoZy6N2tik3QMPSYb8QVcyr0W4IsjU65wAIeHo-bindD7IAQzHHX74vqeUIWwEp3zIAswQDmG2MPepmiAspnoUwGmN~Ha8aTzVBAQlwhjYdvYum~RFbJrA__&Key-Pair-Id=APKAI6TU7MMXM5DG6EPQ"></audio>
</td></tr></tbody></table></div></div>
👍✨
<div align="right"><div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<img src="https://hotelnumberfour.com/wp-content/uploads/2017/09/loading.gif" class="fr-fic fr-dib" width="180" height="180">
<audio controls=""><source src="MP3LINK"></audio>
</td></tr></tbody></table></div></div>
Aa tysm for the code again, i just had a minor issue,,, for my profile the table and fixed bottom part of the code prevents users from clicking the icons at the bottom on desktop. I can reduce the size of the pagedoll to prevent this but I was curious if theres an alternative? If not that's all good, ty again :)
Yeah I had the same issues at some point.
Adding " z-index:9999 " to the thing (text, etc) you want 'in front' of the pagedoll works but you can't edit the website base code so...
I don't know any simpler solution at the moment. because if you put the pagedoll 'behind' then it just doesnt show up so :(
is it possible to style the player in this with the little patterns shown in some of the other codes for this?
Hello! I am having a bit of trouble with embedding a code for one of my characters, it doesn’t seem to play the song , and although I did see what to do if the song isn’t properly playing, I didn’t see any kind of problem from my view really, and am confused about it
Here’s the code I was using! If there’s any problems with it please let me know! It may be that or just my crappy connection
<audio class="btn btn-primary" controls="" style="padding:4px; width:270px;height:40px;border-radius:40px;"><source src="https://docs.google.com/uc?export=open&id=1j-G4aI2CCqiPgicJkR493Bjf_yLBRlvL"></audio>
Hi !
The broken part seems to be the link !
Can you link me the google file directly ? Without doing the edit ? So I can see what's wrong.
Yes of course! Here it is: https://drive.google.com/file/d/1j-G4aI2CCqiPgicJkR493Bjf_yLBRlvL/view?usp=drivesdk
It seems the original code you sent works now (without any modification) maybe it's just that the file was never loaded before ? I'm not sure ;A;
This right :
<audio class="btn btn-primary" controls="" style="padding:4px; width:270px;height:40px;border-radius:40px;">
<source src="https://docs.google.com/uc?export=open&id=1j-G4aI2CCqiPgicJkR493Bjf_yLBRlvL"></audio>
Wello ;; a how do i put the starting time of the audio.? I remember I read it before but I cant find it again srry ;v;
Hi !
It's done by writting " #t=10 " at the end of the link (any number)
example >>> https://cdn.discordapp.com/attachments/740801737568550913/823631169571651644/SHE_like_the_banana_made_with_ditty.it.mp3#t=10
it's at the very start of the page actually-
https://toyhou.se/15618586.risk It worked! :DDDD:D:D:D::D:D TYSMM!!
I'm like read the page for 3 times idk how i didn't realize it sowwy ;v;
Newly added to the tutorial page ! striped animation ! here's a preview ! ✨
<div class="progress" style="width:270px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="height:30px;background-color:rgb(255, 77, 196);">
<audio controls="" style="mix-blend-mode: darken;padding:5px; width:270px;height:30px;border-radius:6px;opacity:0.3;">
<source src="MP3LINK">
</audio></div></div>
Ayo! I was just wondering something-
So, I know I probably did this wrong, but I really wanted the videos so xD
Anyway, long story short (not really), only the last song will play, and if I remove it, well then the song before that one becomes the only one to play 🤔
Here's my super messy and ugly code xD (aLSO ignore the questionable songs wheeze):
<div align="Left"><div class="fixed-bottom"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" controls="" width="250"><source src="https://cdn.discordapp.com/attachments/845686793457238036/960370207409455154/Y2Mate.is_-_The_2022_ADHD_Megamix_CPR_x_Misery_Meme-V3Is9DQzEV0-720p-1649040433788.mp4" type="video/mp4"></video></span></div></div>
<div align="Center"><div class="fixed-bottom"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" controls="" width="250"><source src="https://cdn.discordapp.com/attachments/845686793457238036/960367713509867580/Y2Mate.is_-_One_Nipple_at_a_Time-zFTJLQrds84-1080p-1647731658921.mp4" type="video/mp4"></video></span></div></div>
<div align="Right"><div class="fixed-bottom"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" controls="" width="250"><source src="https://cdn.discordapp.com/attachments/845686793457238036/960370760650731560/Y2Mate.is_-_Just_CallMeKevin_cover_of_Chug_Jug_With_You-uQtx9LvlxIs-1080p-1649040504714.mp4" type="video/mp4"></video></span></div></div>
Umh so... I'm sure there's a way better solution, but here's a very questionable way to make it works ! I hope it works how you wanted it to !
( thoses music are so cursed they're gold tbh )
<div align="right"><div class="fixed-bottom"><table style="width: 100%;"><tbody><tr>
<td style="width: 33.3333%; text-align: left; border-color: transparent; border-style: double; border-width: 1px;">
<span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" controls="" width="250">
<source src="https://cdn.discordapp.com/attachments/845686793457238036/960370207409455154/Y2Mate.is_-_The_2022_ADHD_Megamix_CPR_x_Misery_Meme-V3Is9DQzEV0-720p-1649040433788.mp4" type="video/mp4">
</video></span><br></td>
<td style="width: 33.3333%; text-align: center; border-color: transparent; border-style: double; border-width: 1px; vertical-align: bottom;">
<span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" controls="" width="250">
<source src="https://cdn.discordapp.com/attachments/845686793457238036/960367713509867580/Y2Mate.is_-_One_Nipple_at_a_Time-zFTJLQrds84-1080p-1647731658921.mp4" type="video/mp4">
</video></span><br></td>
<td style="width: 33.3333%; text-align: right; border-color: transparent; border-style: double; border-width: 1px;">
<span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" controls="" width="250">
<source src="https://cdn.discordapp.com/attachments/845686793457238036/960370760650731560/Y2Mate.is_-_Just_CallMeKevin_cover_of_Chug_Jug_With_You-uQtx9LvlxIs-1080p-1649040504714.mp4" type="video/mp4">
</video></span><br></td>
</tr></tbody></table></div></div>
hello! super sorry if this has been asked before, but is there any way to make the colored outline have the bootstrap colors? i tried testing it myself for about half an hour but was unsuccessful :c if u dont know, thats completely fine! thank u so much for the tutorial anyway <33
so... for example somebody want to use a red dead redemption OST, but someone else already have this OST hosted somewhere, so why don't we share links? This way it's less of a work. Basically I'm asking if there's any kind of list with shared file links?
Nothing stop you from making such a list indeed ! Thought from the music I've seen people use they tend to have very varied types and not really use famous one. So I doubt most people would want to use the same musics. The goals of those players is to have something very 'personal' usually. Letting someone else host your file also mean they may delete it and you won't know about it. But it would definitely works ! :D
I want to try and have the bottom right fixed player that hovers, but id like to try and make a stack so I can put multiple songs ontop of one another? how can I go about it? This is the code im using for one song that id like to stack please x idk how to go about that sadly
<div align="right"><div class="fixed-bottom"><audio controls="" style="height:25px;"><source src="mp3LINK"></audio></div></div></div>
ah, i figured it out! I just had to remove the <div class="fixed-bottom"> from the second music box code, and making sure I had one set of the </div></div></div> always on the last box at the bottom to end it if that makes sense? i dont know html lol
<div align="right"><div class="fixed-bottom"><audio controls="" style="height:25px;"><source src="mp3LINK"></audio>
<div align="right"><audio controls="" style="height:25px;"><source src="mp3LINK"></audio></div></div></div>
✧ Thanks you so much for the 4000 >A</ ✧
I'm so glad this can be useful to so many people ! ;v;
I'm not a pro at coding but trying to help everyone here is actually making me improve so this has been quite fun !
Feel free to let me know if you have suggestion for improving the clarity of the layouts and so on !
I'm also looking for someone with an apple device who would have time/be willing to provide me some screenshots of the player !
(they do look different on apple devices but I don't have any to get screenshots of it)
This user is not visible to guests.
This should be what you want ? :0
<div align="right"><div class="fixed-bottom"><table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;"><span style="color: rgb(128, 0, 0);">Song Name<br><div class="card bg" style="background: rgb(128, 0, 0);width:270px;height:40px;"><audio controls="" style="opacity:0.20;width:270px;height:40px;"><source src="MP3LINK"></audio><p><br></p></div></span></td></tr></tbody></table></div></div>
This user is not visible to guests.
Ah yeah I tested on firefox and it was fine but on chrome it was as you said
here's the fixed (i think)
<div align="right"><div class="fixed-bottom"><table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;"><span style="color: rgb(128, 0, 0);">Song Name<br><div class="card bg" style="background: rgb(128, 0, 0);width:270px;height:40px;"><audio controls="" style="opacity:0.20;width:270px;height:40px;"><source src="MP3LINK"></audio></div></span></td></tr></tbody></table></div></div>
Hey! Is it okay if I credit you in a toyhouse tips book I'm making on wattpad? I've linked this and a comment made by sbruc and I just wanted to know if it's okay before I go ahead with making the rest of it and posting it- I'll wait til you think if it's alright! ^^
either I have messed something up, or Toyhouse is breaking something. The colored player looks perfect on Circlejourney's editor, but the color vanishes on toyhouse. I'm not quite sure what's wrong
(Toyhouse on the left, Circle Journey on the right)
<!--SONG 1-->
<p class="mb-1"><span style="font-variant:small-caps;">Paint the Town Black by pragmaticNihilist</span></p>
<!--AUDIO-->
<audio controls="SONG URL" style="background:rgb(194, 80, 181, 0.4);padding:2px; width:290px;height:30px;border-radius:10px;"><source src="https://cdn.discordapp.com/attachments/837417309823041537/844962614173237258/HSVE_-_Paint_The_Town_Black.mp3"></audio> <!--audio end-->
<!--song 1 end-->
Toyhouse is a bit special yeah, not everything that work in the editor work, they do block some of the coding options sadly ;v;
here it seem they don't like the 'opacity' number for the rgb code ;v; > rgb(194, 80, 181, 0.4)
with just rgb(194, 80, 181) it work thought !
for a similar effect as what you were trying to do you can always make the color darker I guess... rgb(94, 33, 87)
or using style="opacity:0.40 but it make the whole player transparent ;;w;;
I don't know a better solution sadly.. but maybe there is one ! I'm not that much of a pro in html so...
so here the working version anyway :
<!--SONG 1--><p class="mb-1">
<span style="font-variant:small-caps;">Paint the Town Black by pragmaticNihilist</span></p>
<!--AUDIO--><audio controls="SONG URL" style="background:rgb(194, 80, 181) ;padding:2px; width:290px;height:30px;border-radius:10px;"><source src="https://cdn.discordapp.com/attachments/837417309823041537/844962614173237258/HSVE_-_Paint_The_Town_Black.mp3"></audio><!--audio end-->
<!--song 1 end-->
This user's account has been closed.
Hey thanks for sharing the trick ! May I add this to the page ? ;v; // with credit
(might take a while to get to it cause I want to do it properly and I'm quite busy, but I'll definitely do !)
This user's account has been closed.
Hey just to let you know I added your code color tip to the page ! :D
And realised there's a f*k tons of color filter other than 'darken' damn... they look very different on chrome and firefox tho... hard to use.
(same rgb and opacity used everywhere here)
I'll try to add the thing about downloading later too !
hello again ! (wow super late sorry)
about your discovery of ' audio controls controlsList="nodownload" '
I've been testing it to add it to the tutorial but I can't seem to make it work, could you possibly link me a page where it works so I can check how it's done ?
that would help a lot, thanks you in advance ! ❤
hi! i'm having a slight problem. All four songs are the same except for the title and the actual link, but for some reason only one will play, I'm not sure what the problem is.
<!--SONG 1-->
<p class="text-muted mb-1">Paint the Town Black by pragmaticNihilist</p>
<!--AUDIO-->
<audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;">
<source src="https://cdn.discordapp.com/attachments/837417309823041537/844962614173237258/HSVE_-_Paint_The_Town_Black.mp3" type="audio">
</audio> <!--audio end-->
<!--song 1 end-->
<!--SONG 2-->
<p class="text-muted mb-1">Oversaturated by pragmaticNihilist</p>
<!--AUDIO-->
<audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;"
<source src="https://cdn.discordapp.com/attachments/837417309823041537/844963005318168637/HSVE_-_Oversaturated.mp3" type="audio">
</audio> <!--audio end-->
<!--song 2 end-->
<!--SONG 3-->
<p class="text-muted mb-1">Ambroisia Fizz by dbnet18</p>
<!--AUDIO-->
<audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;"
<source src="https://cdn.discordapp.com/attachments/837417286595641444/844960257334837278/HSBGN_-_Ambroisia_Fizz.mp3" type="audio">
</audio> <!--audio end-->
<!--song 3 end-->
<!--SONG 4-->
<p class="text-muted mb-1">Desire by Escape the Fate</p>
<!--AUDIO-->
<audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;"
<source src="https://cdn.discordapp.com/attachments/837417130445766656/844961233912201306/Escape_the_Fate_-_Desire.mp3" type="audio">
</audio> <!--audio end-->
<!--song 4 end-->
I'm honestly not exactly sure why but removing the ">" seem to fix it :'<
(removing all the " type="audio" " and keeping/adding the ">" also works so they're conflicting between each others I assume.)
So... This should work ?
| <!--SONG 1--> <p class="text-muted mb-1">Paint the Town Black by pragmaticNihilist</p> <!--AUDIO--> <audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;" <source src="https://cdn.discordapp.com/attachments/837417309823041537/844962614173237258/HSVE_-_Paint_The_Town_Black.mp3" type="audio"> </audio> <!--audio end--> <!--song 1 end--> <!--SONG 2--> <p class="text-muted mb-1">Oversaturated by pragmaticNihilist</p> <!--AUDIO--> <audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;" <source src="https://cdn.discordapp.com/attachments/837417309823041537/844963005318168637/HSVE_-_Oversaturated.mp3" type="audio"> </audio> <!--audio end--> <!--song 2 end--> <!--SONG 3--> <p class="text-muted mb-1">Ambroisia Fizz by dbnet18</p> <!--AUDIO--> <audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;" <source src="https://cdn.discordapp.com/attachments/837417286595641444/844960257334837278/HSBGN_-_Ambroisia_Fizz.mp3" type="audio"> </audio> <!--audio end--> <!--song 3 end--> <!--SONG 4--> <p class="text-muted mb-1">Desire by Escape the Fate</p> <!--AUDIO--> <audio controls style="width:280px;height:26px; opacity:0.5; border-radius:5em;" <source src="https://cdn.discordapp.com/attachments/837417130445766656/844961233912201306/Escape_the_Fate_-_Desire.mp3" type="audio"> </audio> <!--audio end--> <!--song 4 end--> |
Hello!
I noticed Dropbox sharing no longer worked (for me, at least! raw=1 didn't do anything 😭) , so I searched around for a Google Drive option.
It's a bit of a pain, but it definitely works!
(Sharing the information I found from stackexchange and using a song off my drive)
If you share an MP3 by link, you obtain a link like this "https://drive.google.com/file/d/18xjyB4fR2uDgEG5_6wgyj7B6r2zYeKsx/view"
"18xjyB4fR2uDgEG5_6wgyj7B6r2zYeKsx" is the ID of your MP3 file.
Then you can obtain a direct link to this audio by pasting it after the "="
http://docs.google.com/uc?export=open&id=
becomes
http://docs.google.com/uc?export=open&id=18xjyB4fR2uDgEG5_6wgyj7B6r2zYeKsx
Hope this helps! 🥰 Most of my slowed/reverb edits are unfortunately more than the 8mb discord limit.
hi !
thanks you a lot for the explanation ! I will link to your comment on the page if that's okay ? (And will try to test myself later eventually-)
(I did tried to make it work with google drive in the past but I was looking for an url that ended with .mp3 so I didn't found anything lul... it's pretty cool that you did found it !!!)
I'll also need to test with more people if Dropbox really don't work anymore before removing the explanations ofc ,that's pretty annoying if it doesn't...
Of course!! Anything to help out, I just happened to find a solution online and was so excited that it actually worked, I had to share it 😍 I tried to make it as clear as possible.
I'm not sure why Dropbox wasn't working for me, I even tried it out with another commenters link (after I already had a success with a Discord link, so I knew the player worked in my theme.
ah yeah I know that feeling ahah ! it's from similar thought I ended up making this page lul, and a lot of cool people helped me improve it, you join the club here !
I think your explanation is very clear yeah ! I'm sure it'll be useful to a lot of people ! I had quite a few ask me about google drive but I just couldn't figure it out lul, was searching for the wrong thing it seem
I'll definitely try to test dropbox later, hopefully it still work for others at least but... oof
Hi! Is it okay if I use this comment as a reference for a toyhouse coding tip book on wattpad? If not then that's perfectly okay! I've already credited you in the chapter as I've finished it already, but I jsut wanna know if you're comfortable with me posting it! Thanks!
Hello ! Just to let you know I gathered all the turorial in one page for simplicity / to avoid links breaking / messages being deleted etc
▸ https://toyhou.se/6560537.music-player-tutorial-f2u/23831818.links-tutorials
just making sure you're comfortable with this format of crediting ?
👍
I've been trying to use it but i keep getting this message :(
this is the code i have, am i doing something wrong or-? (I'm really bad with codes :'))
<div align="right">
<div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span style="color: rgb(204, 51, 255);opacity:0.30; text-shadow: 0px 0px 15px;"><strong>A Cybers World</strong></span><br>
<audio controls="" style="opacity:0.30; border-radius:40px; background: rgb(204, 51, 255); padding:2px; width:300px; height:35px;">
<source src="https://cdn.discordapp.com/attachments/691682375121240154/891166071699169370/A_CYBERS_WORLD_-_Deltarune__Chapter_2_Music_Extended.mp3"></audio>
</td></tr></tbody></table></div></div>
Have you tried putting it at the end of your code ? like, go to the very bottom of your page code, jump a line and put the code here.
also it seem to have a space after the '> ' try and delete it ? Lemme know if that fix something ! ;w;\
The code in itself work for me so the problem is something else- hard to tell without testing myself but I don't have CSS-
can you show me the page or send me the whole code ? ;v;\ then again I don't have CSS so i bit tricky to test but I'll try my best-
<div align="right">
<div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span style="color: rgb(204, 51, 255);opacity:0.30; text-shadow: 0px 0px 15px;"><strong>A Cybers World</strong></span><br>
<audio controls="" style="opacity:0.30; border-radius:40px; background: rgb(204, 51, 255); padding:2px; width:300px; height:35px;">
<source src="https://cdn.discordapp.com/attachments/691682375121240154/891166071699169370/A_CYBERS_WORLD_-_Deltarune__Chapter_2_Music_Extended.mp3"></audio>
</td></tr></tbody></table></div></div>
that's the only code im using :(
I mean the whole page code, the player code in itself works fine.... mmmmh
can you test putting it on a completely blank page ? and see if it work ? if it doesn't then I can't help because it would be incompatibility with the CSS that I can't test.
this one should work thought I beleive ?
<div align="right"><div class="fixed-bottom"><audio controls="" style="opacity:0.30; border-radius:40px; background: rgb(204, 51, 255); padding:2px; width:300px; height:35px;"><source src="https://cdn.discordapp.com/attachments/691682375121240154/891166071699169370/A_CYBERS_WORLD_-_Deltarune__Chapter_2_Music_Extended.mp3"></audio></div></div>
This is an amazing tutorial! I'll think about implementing this into the profiles I use to make it more enjoyable to scroll to! <3 (already knew how to embed it in but never quite knew how to adjust it as a sticky stamp on one of the screen corners, so thanks for this!)
Hello! I was hoping to maybe get some assistance with the code! I've got it added to my character's sheet and it's working, but it's currently out of line with everything else. I tried adding the <div align="right"></div> around the code, but unfortunately with the code I'm using if I do that, it messes with the entire page somehow, so no <div> for me. Do you have any other ideas for trying to align to the right? I've tried a few other options, but unsure how well I implemented them, so I'd love to hear your thoughts~!
(Heres the exact code i'm using, minus the real audio link because its long and the song is stupid and it'd be embarrassing to show lmao)
<div class="col-sm-6">
<span class="text-uppercase text-muted">Theme</span>
<audio controls="" style="width:150px;height:25px;"><source src= "Totally-A-Real-MP3-Link.Mp3"></audio>
Hello ;w;/ I do want to help you but from only this small bit I'm not sure how to, could you show me the page ?
and don't worry about the music ahah />w<\ I mean look at the one I used for the tutorial
uwu)/ This should work ?
<div class="col-sm-6">
<span class="text-uppercase text-muted">Song</span><span class="pull-right">
<audio controls="" style="width:150px;height:25px;"><source src="wowmuchmp3link"></audio>
I'm not even sure what I did but it worked so let's pretend I know what I'm doing
Hmm, I put that into the profile and it's still stuck on the left for me. I had some CSS stuff in her profile, removed it just in case it was doing something weird, but still sticking to the left for me.
oh... gimme a minute I'll try something else
it work for me thought so that's weird //I don't have premium so I can't test CSS stuff ;;;;
Ah there was a </span> that somehow appeared in the midle it seem, try it again ? ;;;
<div class="col-sm-6">
<span class="text-uppercase text-muted">
Song</span>
<span class="pull-right">
<audio controls="" style="width:150px;height:25px;">
<source src="wowmuchmp3link"></audio>
Hey, I've been having troubles with getting the audio to work
I've been trying to use a google drive link for the music due to not having a Discord as well as not being comfortable with the listed alternatives and nothing both me and my friend have been trying is working
Do you possibly know how to help out with this?
Hello ;w;/ I had in the past, and just re-tested around with google drive. but I still don't seem to find a way to grab a working link from it sadly... it's why it's not listed as an option on the page ;;;;;
So I can only advice to try one of the other hosting website tutorials ;;;
if you're still having trouble with the others thought, let me know ! best of luck to you and your friend ;w;/
Hello!! Sorry to be a burden but I just wanted to ask, is there a way to get rid of the text that indicates the time? I wanted the slider to show while audio player's sized down a bit
hey soo i really want a custom button for my audio player ! i'l give an example - https://toyhou.se/3295119.o2-toggle-3- [there's a play button symbol on there and when i click it plays, i haven't seen any codes like that] i kinda was thinking they put the opacity to zero and did the symbol on there like that or sm . . i'm kind of a noob at html so i'd kinda like to know how to do it if you know
ah sorry I'm not a pro either in html so I'm not sure how they did. And I don't think just ripping it off their code would be nice so ;v;
if you ask them and they say it's fine I can do it tho ! (would need to ask them if taking the player part of their code for non-comercial use is okay or not)
I guess this is close thought ?
<p><audio controls="" style="width:50px;height:40px; opacity:0.35;border-radius:10px;"><source src="https://cdn.discordapp.com/attachments/740801737568550913/823631169571651644/SHE_like_the_banana_made_with_ditty.it.mp3"><br></audio></p>
so im using the one at the center with the title at the top but for some odd reason theres no audio and its a mp3 file
this is the code btw
<div align="center">♪ bubblegum kk ♪<br><audio controls=""><source src="https://cdn.discordapp.com/attachments/771544165229527061/862493364527300608/Bubblegum_K.K._ACNH.mp3%22%3E"></audio></div>
here, fixed :3 (just removed the '3%22%3E' there was at the end of the link.)
<div align="center">♪ bubblegum kk ♪<br><audio controls=""><source src="https://cdn.discordapp.com/attachments/771544165229527061/862493364527300608/Bubblegum_K.K._ACNH.mp3"></audio></div>
is there a way to put it at the left side cause i have a pagedoll of kk slider and i want it to be like hes singing
is there a way to put the music title in the white box either before or after the play button?
I need to add properly to the page but for now have it dumped messily in comment here :
Player with pop-up text ! (hover it wih mouse)
<audio class="tooltipster" controls="" title="TEXT HERE"><source src="MP3LINK"></audio>
I tried to upload it to discord, but it said the mp3 file was too big. I dont want to upload it to dropbox, so the only way to do it was through vocaroo, but i know vocaroo links die within a couple of months. Is there any other way? If not, i will just have to re-upload the file after the link expires.
If the video is from youtube I do have another possible method :0 it'll be a bit long to explain so if it's only for one file just send me the link and I'll do the magic ahah
(I plan to the add the explaination on the page but it's complicated so oooof)
If the file isn't from youtube thought... well you can try to shorten the file... but I don't have other hosting website to offer yet sadly ;-;
It seems that vocaroo keep the file for longer than I expected tho ? The one I used for the comment tutorial is still up after 1y ! :0 maybe as long as it's 'activated' regularly they keep it up I do not know.
Ah, heres the song i used from youtube: https://www.youtube.com/watch?v=3dZczoNnFWI
Umh so sadly the trick I wanted to use doesn't seem to work for this specific video...
So I just reduced the weight of the file (it shouldn't have affected the quality of the audio too much hopefully ?) >>> https://cdn.discordapp.com/attachments/567157426126585859/860531866628128808/mrs_magic.mp3
(please download the file and re-upload it yourself on your server thought, don't use this link directly, in case I delete the file from my own server and stuff you know ;v;)
May I have some assistance? I do apologise if this seems like a no brainer type question or whatnot but I couldn't get it to work myself!
I wanted to make my MP3 player visually similar to the one that floats on the code page itself; So with the song name displayed and the coloured border, however, I also wanted to add the ghost code to it, how would I go about it that? I hope this isn't a bothersome question to ask aaaa
You're fine don't worry, thanks for being so polite ;w;/
Here it is !
<div align="right">
<div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span style="color: rgb(204, 51, 255);opacity:0.30; text-shadow: 0px 0px 15px;"><strong>Song Title</strong></span><br>
<audio controls="" style="opacity:0.30; border-radius:40px; background: rgb(204, 51, 255); padding:2px; width:300px; height:35px;">
<source src="MP3LINK"></audio>
</td></tr></tbody></table></div></div>
Change the opacity:0.30 to chose how transparent you want it ! there is two of them one for the player and one for the text !
(0.30=30% so you can go from 1.00 to 0.00, the lower the number the more transparent !)
Feel free to ask me if you have others questions it doesn't bother me don't worry !
Ah thank you so much! This was super helpful! One last question then, how would I go about stacking two of this code? One above the other? HTML is still very confusing to me once it goes past simple containers and putting things in quotes :'D
No problem ! :D
About stacking, test this and tell me if it's what you want :'D it's faster for me to just edit it myself than to explain ahah sorry
<div align="right">
<div class="fixed-bottom">
<table style="width: 0%;"><tbody><tr><td style="width: 100%; text-align: center; background-color: transparent; border-color: transparent; border-style: double;">
<span style="color: rgb(204, 51, 255);opacity:0.30; text-shadow: 0px 0px 15px;"><strong>Song Title</strong></span><br>
<audio controls="" style="opacity:0.30; border-radius:40px; background: rgb(204, 51, 255); padding:2px; width:300px; height:35px;">
<source src="MP3LINK"></audio>
<p>
<span style="color: rgb(204, 51, 255);opacity:0.30; text-shadow: 0px 0px 15px;"><strong>Song Title</strong></span><br>
<audio controls="" style="opacity:0.30; border-radius:40px; background: rgb(204, 51, 255); padding:2px; width:300px; height:35px;">
<source src="MP3LINK"></audio>
</td></tr></tbody></table></div></div>
This user's account has been closed.
It should work anywhere really :0 can you show me the page/code that isn't working for you, so I can fix it ?
This user's account has been closed.
ah ! The vocaroo link was wrong here is the corrected (working) player ;v;
<div align="right"><div class="fixed-bottom"><audio controls=""><source src="https://media.vocaroo.com/mp3/1o1KroK9OqPE"></audio></div></div>
This user is not visible to guests.
Yes you totally can :0 I wonder what you did for them to disapear like that ? which one did you tried ? if it's not the basic one maybe a forgot a <div> at the end it messed up something D:
show me the page/code you used so i can correct it :0
just adding a <p> or <br> in between should work thought :0
This user is not visible to guests.
It seems it's that '</div>' yu put in between them that was breaking it :0 as well than the second discord link end was broken.
here is the fixed version let me know if it work ?
<p><audio controls="" style="width:100px;height:25px;">
<source src="https://cdn.discordapp.com/attachments/661386266331316229/847477474648522783/MP3DOWNLOAD.TO_Cavetown__Pigeon__Official_Audio-320k.mp3">
<br></audio></p>
<br>
<p><audio controls="" style="width:100px;height:25px;">
<source src="https://cdn.discordapp.com/attachments/661386266331316229/847489865474244638/Good_Old-Fashioned_Lover_Boy_Remastered_2011.mp3">
<br></audio></p>
[ Music Player Tutorial F2U ]'s Comments