Bela's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog

View Profile

Report Blog Entry

❀ Code #17: Music Player (autoplay + loop enabled)

UPDATE:
As of the last update, the audio tag doesn't work. If you're using youtube autoplay, you have to approve the youtube/spotify/souncloud embed. Which means that your audio option has to be visible otherwise, people going to your profile won't even see the option to approve it.

This is what it looks like:

Telepathy by BTS

the css:

<style>
/* this changes the background of the song name */
.songnamebackground {
    background: black;
    border-radius: 0px;
    padding: 5px;
}
/* this customizes the title of the song */
.songtitle{
    font-family: Arial;
    font-weight: normal; /*you can switch this to bold */
    font-size: 13px;
    color: LightSteelBlue;
}
/* this is for the entire box.
you can add a background image if you want */
.player {
    background: transparent;
    border: 3px solid black;
    padding: 0px;
    margin:0px;
}
/* this changes the color of the download button
go to https://codepen.io/sosuke/pen/Pjoqqp to get the code */
.player a img, .player audio::-webkit-media-controls-play-button, .player audio::-webkit-media-controls-mute-button, .player audio::-webkit-media-controls-volume-slider, .player audio::-webkit-media-controls-timeline {
    filter: brightness(0) saturate(100%) invert(99%) sepia(70%) saturate(1745%) hue-rotate(175deg) brightness(86%) contrast(102%)!important;
}
/* this changes the color of the entire track 
go to https://codepen.io/sosuke/pen/Pjoqqp to get the code */
.player audio, .player audio::-webkit-media-controls, .player audio::-webkit-media-controls-enclosure, .player audio::-webkit-media-controls-panel {
    background: transparent;
    height: 40px;
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(16%) hue-rotate(246deg) brightness(98%) contrast(105%)!important;
}
</style>

the html:

<div class="player box">
 <div class="songnamebackground">
 <span class="songtitle">Telepathy by BTS</span>
 <a href="https://www.dropbox.com/s/07ghg1wjig0x7si/Telepathy.mp3?dl=0" download="Telepathy">
 <img style="height: 15px; float: right; padding-right: 2px;" src="https://i.imgur.com/q2ya6tG.png"></a>
 </div>
 <audio controls="" loop="" autoplay="" src="https://dl.dropbox.com/s/07ghg1wjig0x7si/Telepathy.mp3" controlslist="nodownload"></audio>
 </div>



To use a song from Dropbox, click here.
1. Upload your file.
2. On your file, click the Share button.
3. Click COPY LINK. It will be something like this:
https://www.dropbox.com/s/07ghg1wjig0x7si/Telepathy.mp3?dl=0
6. Take out the ?dl=0
7. Take out the www and replace it with dl
Your link should look something like this:
https://dl.dropbox.com/s/07ghg1wjig0x7si/Telepathy.mp3
8. Now you can paste it into the code above where it says src=""
9. Paste the unedited url into the section with the download link.

To use a song from Google Drive, click here.
To use youtube autoplay, click here.
To use other music player methods, click here.


42 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

xX_olivurrr

xX_olivurrr's profile picture

this was working great until they removed the tag :(

thought i'd let you know bc i spent a while trying to figure out why it stopped working until i realized it kept removing that part


Report Comment



oop i cant type it haha, the audio tag

by xX_olivurrr; ; Report

Noooo I JUST logged in and saw this :( thanks for letting me know. Now I gotta see what actually works and try to find good autoplay options

by Bela; ; Report

i'm using one of the youtube autoplay ones but you can't pause/play or loop it ;--;

by xX_olivurrr; ; Report

newdawn22

newdawn22's profile picture

Thank you for this post. Is there any way to add multiple song links so that they would play like a playlist/music queue?


Report Comment



As far as i know, you cant because it would require javascript which is not allowed in spacehey. But you can use a Playlist with the youtube autoplay.

by Bela; ; Report

Okay, I thought it wouldn't allow playlists somehow. Thank you!

by newdawn22; ; Report