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
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>
No problem I like to help don't worry ! ;w;\
I checked the page and the player are here/works for me ? :0
I don't really know if this actually have been asked but I have a problem with the audio playing, I did everything and there are no <em> 's before the code and it still doesn't work ? I also have got the link from discord and paste it in the right place but it still doesn't wanna work quq ?
Can you show me the code you're using or link me to the page where you're using it ! ? I can't tell what's wrong from the screenshot ahah ;w;\
I used the following :
<div align="right">
<div class="fixed-bottom">
<audio controls="">
<source src="https://discord.com/channels/@me/816424036702879805/843632261807210507">
</audio>
</div>
</div>
And i used it on my page/profile ;u;
ah it's the discord link you copied that is wrong ;v; i'm not sure what you copied but try again ? for it to work it need to be one that end with ".mp3" (not just adding it at the end i mean when you copy it check if it it does)
try that and let me know if it still doesn't work i'll try and help better ;v; (if it doesn't then maybe try to send me a screenshot of the file on the server ?)
Not me just realizing it now but srsly thank you sm sorry I was so stupid aH
no problem ;v; I see that the player still doesn't work on your profil.. are you still having trouble or haven't got to it yet ?
I don't use spotify but <this> should work ?
I just googled spotify downloader really...
Just finished re-doing the layout hope it's better now !
if anything isn't working please do report it to me ;v;\ might have messed up some details when re-doing...
Hey! For this characters page, I’m trying to make a player similar to the one in the thumbnail with a square coloured border around it! I noticed though, that The colour block behind is not centered with the player, and I’m not too sure how to change it to just a simple border-!
the profile: https://toyhou.se/~characters/edit/2270872
tbe code I used: <div align="center">♪ Her Favourite Song ♪<br><audio controls="" style="background:rgb(204, 204, 255);padding:10px;"><source src="https://www.dropbox.com/s/zugjjt1w4y945az/Sweater%20Weather%20-%20The%20Neighbourhood%20Lyrics.mp3?raw=1"></audio></div>
Hello ;w;/
When I test the code you linked it seems aligned to me, could you show me a screenshot of what you mean possibly ? ;;v;;
to me it appear like this (I tested both firefox/chrome, the firefox one seems aligned as well)
I know that when you play with custom height sometime the padding is 1px-off or so at the top, but yours don't have custom height so ;;;;v;;;; don't know...
Aaaaa of course! Here’s a screenshot! Sorry for the link I’m not sure how to upload images on a th comment jfjfjfj https://gyazo.com/55c152c4fac278248676791fb9db984a
oh that look very weird ;A; on what device are you viewing it ? Ipad like you said in previous comment ? if tho then it have to be an ipad thing ;A; but it look normal on any browser I tested, and so to all person using pc most likely ?
Ahhh yes it is on my iPad! It looks fine on your end though, so it must just be a mobile thing :p I trust your judgement, so I’ll just leave it as it is then! ^^ thank you for looking into it though!
no problem ;v;
there not much I can do about devices special way to display things sadly... but it should look normal to most people viewing your page don't worry ;w;)b
I'm curious tho does all the player on the tutorial page look miss-aligned like that as well ???
Woah, Was This Just Recently Updated?
yes I update regularly when I find something new ;v; most recent find with the color thing about a week ago ;v;)b
( I aslo did a re-organisation of the page a few days ago to hopefully make it clearer.)
I plan on doing a complete layout revamp again soon tho.... ;v; I don't really like how the page look right now.
Aaaaaa I’m sorry if this is already answered, but I can’t figure out how to send the mp3 file in discord? I’m using my iPad, so I thought maybe it Didn’t work on mobile? But I heard others saying it does-
I don't have an Ipad so I have no idea/can't test that myself sadly ;v;\ i think it should work tho as long as yu have the mp3 file on the ipad ? just clic the send image thing and select the mp3 file ? I think ? I can't test so I really don't know sorry ;;;v;;;
Aaaaa darn- Ok! That’s what I was trying but it wasn’t working aaaaaa
hello! You may have figured it out or moved on/given up by now but if not- At your Home Screen go to left most screen and search “files” - it should be in there. Click on it and look for the share button, then select “discord” and choose who/what server+channel to send it to. hopefully that helps! I do this from my iPad and iPhone
curious if you know how to do the title pop up when you put your cursor on the player? (like on http://toyhou.se/robot 's page; didnt wanna ping them lol). I try using title="title" but it doesnt work (ends up like the player on my page)
Okay I asked the person if I could share and they said there's no problem, so here it is :3 Going to add it to the tutorial page later as well !
<audio class="tooltipster" controls="" title="TEXT HERE"><source src="MP3LINK"></audio>
WAH THANK you so much!! ALSO no problem for the mass replies LOL you're all good!! I just miss replies here sometimes, I apologize!! I appreciate you asking them for me, and adding it to the tutorial too, you're doing gods work <3
oops, could I also grab that other example of code you used for the title/tooltip before? Id love to use that for other things ; v;7
ah sure here it is ;w;\
<p><span data-toggle="tooltip" for="" style="border-bottom:1px dashed;" title="[ Desc ]"><span style="font-size: 14px; color: default;">[ Title ]</span></span></p>
there's a few option for the line under btw ;v; and you can change the color of the text/line separatly ;w;
[ dashed ] [ dotted ] [ solid ]
♪ [ Sorry if the page is a bit unclear, I'm strugling to keep everything organised since there is so much stuff to explain ;A; ] ♪
~ Might try to do a whole layout overhaul again soon... Suggestions are welcome ♪
Do you mind if we ask how you got the text centered over the player with the player staying on the bottom right? We can't quite figure it out on our own,
Ah yeah I didn't puted it on the page yet because the way I made it work was quite a mess... qwq\ I was waiting to have simpler version before sharing it... Which I just made ! (I just added the explaination to the page)
here it is ;w; it's the basic one but you can switch the <audio controls=""><source src="MP3LINK"></audio> part for any of the other custom players ;w;
<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;">Song Title</span><br>
<audio controls=""><source src="MP3LINK"></audio>
</td></tr></tbody></table></div></div>
feel free to ask if you have any more question ;w; I'm strugling a bit to keep the page clear with all the new options available...
Is there a way to add text onto it? like "theme: song name" ?? or would that have to be coded seprately?
ah thanks you for making the tutorial ! I didn't got around to use dropbox myself so I didn't made one... if you're okay I'll link to your comment on the page in the dropbox section ?
Alright just added it !
As long as it's a direct link to the file it should work I think :3 I went to check the type of player you use and it's pretty similar to this one so it shouldn't cause any problems ;w;/
( if you're curious, this player aslo used to have "type="audio/mp3"" at the end but I noticed that removing it doesn't break it, so I did since it shorten the code ahah ;w; )
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'm happy to help anyone that's having trouble making it works, but please :
▹ formulate your question/problem clearly.
▹ if possible, link the version of the code you used (the one that isn't working for you)
(it doesn't matter if commenting it here turn it into an actual player i can grab the code of it anyway)
▹ read the whole page, often the question is already answered on it
thanks
when I try it, it doesn’t work, maybe it’s because it doesn’t work on mobile?
do you mean the one on the page or you tried to use the code ? ;w;
if you tried to use the code please copy paste what you used here so I can see what's wrong.
if it's the one on the page that doesn't work, it does work on mobile, so try to wait a bit it can take some time to load. if it still doesn't work then it have to come from your phone or connexion because normally it does work.
aslo be aware only the one on the top of the page is an actual player, the two in the 'appearance vary depending on browsers" are screenshots. ;w;
when i link the audio and add .mp3 at the end , the audio doesnt play for some reason ? i used an audio file on discord too ><
oh no adding 'mp3' at the end of a link won't work ;w;''' the link have to originally end by mp3. can you show me the link you're using so I can see what is the problem ? qwq
i think i see the problem now with the link ! i’ll try fixing it and let you know if i have any other issuez
I tested the link you just showed and it works for me, does it still not work for you ? ;w;
here a working version :
<audio controls="" loop=""><source src="https://cdn.discordapp.com/attachments/807833140038467594/816120646148816896/Acid_Plant_Medicine_C700_Original_Flower_Dance.mp3"></audio>
if it still doesn't work try looking for any <em> right before it and delete it ;w;
music player not working for others?
everything is working fine for me, I'm on opera. :>
Is autoplay available?
As in, as soon as someone visits my profile, the music suddenly starts without someone having to click the "play" button.
thanks for the suggestion ! ;w;
I tested a few variant of it and none seem to work for me, have you tried it yourself, does it work ? ;w; I might have missed a detail ?
( toyhouse block quite a few coding options so even if the coding itself exist toyhouse might not support it qwq... i had that issue before when trying to set custom starting volume... )
ah i see ;w; yeah stuff that work normally sometime don't on TH sadly. (it's for users safety i beleive, otherwise people could put malicious code on their pages)
and no problem you couldn't know don't worry ;w;/
a lot of explaination I added on this page are from questions or sugestions in comments so it's always appreciated even if it turn out to not work ! ;w;/ (i just added a mention about toyhouse blocking code functions right now for exemple)
Hello! I've had no trouble with the normal player, but I've had some issues with the custom sized player?
When I use a discord direct link with it, I can see the player but it's greyed out and I can't click on it. D: There's no < em > before it or anything, but I can't figure it out! I've tried moving it too, but the custom size doesn't work anywhere.
Hello ;w;/
Could I see the page/code where you tried to use it ? and what size you used ? if you used a very small size it might not function very well indeed. ;w;
Thankyou so much for the reply! I've tried it with a lot of different sizes, the size I'm using currently is 150 x 30~
< p class="card-text text-muted">"QUOTE"< /p> < p >< audio controls="" loop="" src="AUDIO HERE" style="width:150px;height:30px;" >< br >< /audio >< /p > < /div > < /div > < /div >
I've also tried this one on a character profile without any other code at all and it doesn't work :C < p >< audio controls="" loop="" src="AUDIO HERE" style="width:150px;height:40px;">< br >< /audio >< /p >
no problem ;w;/
uh so that's very interesting, the code as it is here, works on firefox but not on chrome (lol) I'm using firefox so I didn't realised ! ;w;\
here is a version that work on both ! (hopefully, i tested it, it should, but let me know if it still doesn't ;w;\)
< p>< audio controls="" loop="" style="width:150px;height:30px;">< source src="AUDIOHERE">< br>< /audio>< /p>
how do i change the size of the player? i'd like to import it into a layout but it's too big-
Hello, sadly I do not know yet / if it's possible to chose the width of the MP3 player (if you're talking about this one?) qwq ... If I ever find a way to do it, I'll be sure to reply to you again !
i've actually found a way after doing a little bit of researching!
Can you please share with me so I can add to the page for others to use as well then ? ;w;
absolutely! i've found this code vv
<audio style="width:100px;height:20px" src="AUDIO FILE HERE" preload="none" controls="controls"></audio>
works, both the width and height are customizable
thanks you ! going to add the explaination on the page soon
( I tried to simplify it a bit as you can see : < audio controls="" loop="" src="MP3LINKHERE" style="width:500px;height:35px;">< br>< /audio>< p>< br>< /p> )
Do you want credits for the find ? since it's basic coding I avoid puting credits to specific person but if you want i can add it somewhere ;w;
Mine is visible, but doesnt play music ;w;
Hello ! I can't see the problem from the picture please show me the code you used so I can help you ! ;w; With adding space like that < exemple > < /div >.
but some people already had this issues before, you can try to look if there's any < em > right before the code, if there is delete them it might fix it !
hi !! first of all thank you so much for the code!! i’m trying to make a tab of my favourite music with this player, and i’ve got all the audio files uploaded on discord, however only the first song seems to play properly, how can i fix this issue? https://toyhou.se/9483082.actually-me/9511745.a-gift-for-you-- here’s the tab in question ^^ for further information i only finished adding the audio files to the code for the first section , i haven’t finished coding 2 or 3 yet here’s a link to my code! for further information/troubleshooting thank you again so much !!!! https://docs.google.com/document/d/13WVW2w0pEwZPZ2yFURg0UtVqqL-FsXH3m8HGDcFWN7Q/edit
edit: all the players work normally in WYSIWYG, but not when viewing the tab outside of editing.
hello, no problem ;w;/
try this edit and tell me if it work ? https://cdn.discordapp.com/attachments/567157426126585859/797939762505842698/code.txt
what I did is deleting the "< em>" that are just before the "< audio controls=" ">" It can cause the player to not work when they're placed just before. same issues might happend with < br> and < p> so watch for that if that happend again ;w;
let me know if that fix your issues ! ;w;/
my player is visible but it dont work
can you show me the code ? ;w;
i put it in like this, the player shows but the music doesnt play ;;
i cant seem to get discord to work for me, it keeps saying the file is too big and i dont want to pay for nitro as i dont really use it. ive been trying to upload to my server idk if thats the correct way. my music code is being hosted on google drive.
(without spaces) this is what ive been trying
< audio controls=""><source src="1msV8Zwcg3dQXmkhLCX0KNcHD5_MowDij"></audio >
yeah the 'link' you have here won't work. ;w; for it to work with the player the link will need to look something like "https//jhfkhdhkh.mp3" I tried using google drive but it haven't found a way to access the link to the file directly... so as far as i know you can't use google drive. (you probably can but i don't know how yet)
if your file is too long for discord simply shorten it ;w; (if it's under 4~6minutes it should be fine) you can do it yourself using this software : https://www.audacityteam.org/ or try to look for a shorter version on youtube and download from it there ?
let me know how it goes i'll try to help you if you still have troubles !
Would this work for mp4 or just mp3? :0
Sorry if I forgot to reply to any of the thanks message (would be a bit weird to reply so long after now) ;;;; you're all welcome an I'm very happy it's usefull ! ;;ww;; thanks for the 1700 favorites damn ! <3
thank you so much for doing this AKDJGJS
i have a tiny question , do you know if this is mobile friendly :o?
No problem :D
I'm pretty sure it does work just fine on mobile yes :0 (I can't test it myself I don't have a smartphone ;w; but some friends did) depending on where you place it on your page (if inside another code boxe etc) it make diform/break it a bit tho... it's a bit of a case by case, need to test and see ;w;
How do you get a link? Is it just the YT (youtube) URL or...
It sadly can't be youtube URL, you have to download the music and host(upload) it somewhere. I recomand discord.
It's explained on the page ;w; please read it carefully.
Aw srry i dont have discord.
I do have one other website that work but I don't know how long they keep the files ;w; (so the player might stop working in 6 months or so...)
but you can try it :
- upload your file here : https://vocaroo.com/upload
- get the "https://voca.ro/23RG0mVJpU5" looking link. grab just the end number part : 23RG0mVJpU5
- add "https://media.vocaroo.com/mp3/" before , for it to look like this : "https://media.vocaroo.com/mp3/23RG0mVJpU5"
I added one just this morning to one of my oc page and it still work fine for me. and the one on this page as well. did you deleted the original post possibly ? or maybe it's taking time to load ? ;w; it can be a bit long sometime.
Strange indeed ;w; but glad you figured it out ! maybe it's some sort of add-blocker/security blocking links from discord ?
I must mention tho, The vocaroo method, I beleive, only keep the file up for few months... ;-;
( I have been looking for another option than discord to use an hosting website, but it's very hard to find any that actually work ;-; )
<3 just wanted to pop by and say tysm for this tutorial!!
would you mind if i linked people to this page? i compose music commissions and people sometimes need a step-by-step to putting it on their character pages.
again, ty either way!! :)
tysm!! using it. there is no way to customize it right? like in chrome for example you have a white player which I would like more in dark mode.
hi! ' v ' )/ thank you for this code its SO helpful !!
do you know if there is anyway to add autoplay or set the volume with the code? :0
I'm glad it's usefull ;w; <3 For the volume I tried to find something but apparently it's not compatible with how TH 'read' the code ;-; ( I'm quite the noob though, so maybe it's possible and I just couldn't make it work ) as for auto-play, I didn't tried yet but I might go and look, I'll let you know if I find something !
I have not found any other website that work as good as discord for now. I do searched for a while but without finding anything satisfying.
There's this one but the link will break after just a few months so.... eh. not really worth the bother. >>> https://toyhou.se/~comments/2377136
theorically, Google Drive should work, but I couldn't figure out where to grab the direct link to the mp3 file ;-; need to research again...
as it is right now i'd say "making a discord account is way easier than trying to find something else that work." lmao >w<\
// I'll update if i find something else. might and go and research again //
try and place <div align="center"> just before, it should work ;w; do let me know if it doesn't I'll see if i can find something else.
np, glad it's usefull ;w;\ I didn't really "made" the code thought, it's just basic html (as you can see with how short it is), I just tried to made a beginer-friendly presentation of it ahah
wHOA OMG thank u so much for this code!! ive been trying to find music codes to use for my oc voice claims and this is perfect!!
Can you tell me how to get the link of my MP3 file? ;;;
> You have to download the music you want > then upload it somewhere ;w; ( discord, hosting website.... ) somewhere where it's a direct link.
personally i used discord qvq I'm not sure what other website would work... I'll reply to you again with a website that work if i find one.
Ok i found another website that work :
- upload your file here : https://vocaroo.com/upload
- get the "https://voca.ro/23RG0mVJpU5" looking link. grab just the end number part : 23RG0mVJpU5
- add "https://media.vocaroo.com/mp3/" before , for it to look like this : "https://media.vocaroo.com/mp3/23RG0mVJpU5"
and here, a working mp3 link :
edit : Apparently the link will die in a few months though.... I'd recomand using discord if you can, or look for a better hosting website.... I sadly don't have sugestion for the website to use yet.
I don't know the process to get the link on Discord. I'll use the website you gave me. Thank you!! <3
The thing I explained should work, but with this website the link will "break" in a few months, which mean the audio player will stop working ;-;
So I can explain you how to get discord link if you want ?
It would be super nice if you could explain it to me :o
It's pretty simple, on Discord, in any chanel just upload the music file (preferably a "safe" chanel you know won't be deleted, so, a private server just for you or something ;w; )
once you have the file in the chanel, right clic on the name of it, "copy link" and there you go ;w;/ a fonctioning mp3 link !
try that, and if you have any trouble let me know qvq\
It doesn't appear to be working for me...
Just shows the entire code rather than a little audio player, not sure why
It's on my character Apophis if you wanna see what I mean
[ Music Player Tutorial F2U ]'s Comments