Jump to content

embedding audio playlist player (from codepen) into site

By abstrkt, in Customize with code

Recommended Posts

abstrkt Level 1

abstrkt

Posted
Posted

Site URL: https://www.abstrkt.online/

Hello everyone! I am hoping to get some help with embedding this audio playlist codepen plugin onto my website. 

This is the plugin: https://codepen.io/gifteconomist/pen/LREwXv

What I was hoping to do was embedding what he has made into my website and then changing it so that it receives audio from my soundcloud. But I can't even get his template to embed correctly as nothing changes on my site. I've tried putting the CSS code in the custom CSS section and then putting the html code into a code block but nothing changes except the outline of the box appears. 

I don't have any experience with coding this complicated so I would really appreciate some help. Thank you so much!

Link to comment
  • Replies 1
  • Views 1.6k
  • Created
  • Last Reply
tuanphan Level 17

tuanphan

Posted
Posted

Add Code Block > Paste this code 

<main>
  <section>
  <div class="playlist">
    <div class="plyr">
      <audio controls></audio>
    </div>
    <ul class='playlist--list'>
      <li data-id="0" data-image="https://www.callofduty.com/content/dam/atvi/callofduty/hub/main-hub/iw-hub/games/key-art/aw-key-art.jpg" data-audio="http://cdn.ascap.com/Member/Jach_Wall/BlackOps3.mp3">Call of Duty: Black Ops 3
         <span class="artist">Jack Wall</span>
      </li>
      <li data-id="1" data-image="https://seussblog.files.wordpress.com/2013/03/143056e8473127ab6a665773884132bc.jpg" data-artist="StarBelly" data-title="Broken Hearts in Stereo" data-audio="http://cdn.ascap.com/network/audioportraits/Starbelly/03.mp3">Broken Hearts in Stereo
    <span class="artist">Starbelly</span>
      </li>
      <li data-id="2" data-image="http://east.myna1.net/wp-content/uploads/sites/24/2016/03/nathan-east-pic.jpg" data-audio="http://cdn.ascap.com/Member/Nathan_East/Approach.mp3">Approach
        <span class="artist">Nathan East</span>
      </li>
      <li data-id="3" data-image="http://www.newyorker.com/wp-content/uploads/2016/01/Henderson-Whitney-Houston-and-the-National-Anthem-1200.jpg" data-audio="https://upload.wikimedia.org/wikipedia/commons/6/65/Star_Spangled_Banner_instrumental.ogg">Star Spangled Banner
        <span class="artist">America</span>
      </li>
      <li data-id="4" data-image="https://seussblog.files.wordpress.com/2013/03/143056e8473127ab6a665773884132bc.jpg" data-artist="StarBelly" data-title="Broken Hearts in Stereo" data-audio="http://cdn.ascap.com/network/audioportraits/Starbelly/03.mp3">Broken Hearts in Stereo
    <span class="artist">Starbelly</span>
      </li>
        </ul>
  </div>

  <div style="display: none;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg></div>

</section>
</main>
<style>
  .playlist--list {
  overflow-y: scroll;
  border: 1px solid #ccc;
  border-left: none;
  height: 340px;
  list-style: none;
  padding: 0;
  font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: .95;
  color: #565D64;
  display: inline-block;
  float: right;
  margin: 0;
  width: calc(100% - 343px);
}
@media (max-width: 600px) {
  .playlist--list {
    display: block;
    width: 340px;
    float: none;
    border: 1px solid #ccc;
    border-top: 0;
  }
}
.playlist--list li {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #222;
  padding: 0;
  cursor: pointer;
  padding: 20px 10px;
  background: #ffffff;
  border-bottom: 1px solid #ccc;
}
.playlist--list li:last-child {
  border-bottom: 0;
}
.playlist--list li:hover {
  background-color: #3498db;
  color: #ffffff;
}
.playlist--list li.active {
  background-color: #CCDADE;
  color: #565D64;
}
.playlist--list li span {
  pointer-events: none;
}
.playlist--list li .artist {
  display: block;
  font-weight: normal;
  margin-top: 5px;
  color: #666;
  font-size: 18px;
}

.plyr {
  display: inline-block;
}
.plyr .plyr__controls {
  background-size: cover !important;
  height: 342px;
  width: 342px;
  background: rgba(0, 0, 255, 0.4);
  display: inline-block;
  border: 1px solid #ccc;
  border-right: 0;
}
@media (max-width: 600px) {
  .plyr .plyr__controls {
    border: 1px solid #ccc;
  }
}
.plyr .plyr__controls .plyr__time--current {
  color: #999;
}
.plyr .plyr__controls [data-plyr="play"] {
  display: block;
  margin: 140px auto 0;
}
.plyr .plyr__controls [data-plyr="play"] svg {
  fill: white;
}
.plyr .plyr__controls [data-plyr="pause"] {
  margin: 140px auto 0;
}
.plyr .plyr__controls [data-plyr="pause"] svg {
  fill: #999;
}
.plyr .plyr__controls [data-plyr="pause"]:hover svg {
  fill: white;
}
.plyr .plyr__controls .plyr__progress {
  position: relative;
  bottom: -115px;
  margin: 0;
}
.plyr .plyr__controls .plyr__time {
  position: relative;
  bottom: -115px;
}
.plyr .plyr__controls [data-plyr="mute"] {
  position: relative;
  bottom: -115px;
  fill: #ccc;
}
.plyr .plyr__controls .plyr__volume {
  display: inline-block;
  position: relative;
  bottom: -115px;
  max-width: 55px;
}

.plyr--playing [data-plyr="play"] {
  display: none !important;
}
.plyr--playing [data-plyr="pause"] {
  display: block !important;
}

.plyr--stopped .plyr__progress, .plyr--stopped .plyr__time, .plyr--stopped [data-plyr="mute"], .plyr--stopped .plyr__volume {
  display: none !important;
}

.playlist {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.3);
}
@media (max-width: 600px) {
  .playlist {
    width: auto;
  }
}

section {
  width: 100%;
}
@media (max-width: 600px) {
  section {
    width: 342px;
    margin: 0 auto;
  }
}

section:before {
  content: '';
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  margin-right: -0.25em;
  /* Adjusts for spacing */
}

main {
  width: 80%;
  margin: 0 auto;
}

body {
  margin: 0;
  background: #f94f4c;
}
</style>
<script src="https://cdn.plyr.io/1.6.13/plyr.js"></script>
<script>
  //Using JS Audio Player Plyr

plyr.setup(document.querySelector('.plyr'));
var radio = document.querySelector('.plyr').plyr;

var player = document.querySelector('.playlist');
var playerControls = document.querySelector('.plyr__controls');
var songs = player.querySelectorAll('.playlist--list li');
var i;
var active = null;

for(i = 0; i < songs.length; i++) {
	songs[i].onclick = changeChannel;
}

setSource( getId(songs[0]), buildSource(songs[0]) );

document.querySelector('.plyr').addEventListener('ended', nextSong);

function changeChannel(e) {
	setSource( getId(e.target), buildSource(e.target), true );
  setArt(e.target);
}

function getId(el) {
	return Number(el.getAttribute('data-id'));
}

function buildSource(el) {
	var obj = [{
		src: el.getAttribute('data-audio'),
    image: el.getAttribute('data-image'),
    artist: el.getAttribute('data-artist'),
		type: 'audio/ogg'
	}];
  
  console.log(obj[0].image);

	return obj;
}

function setSource(selected, sourceAudio, play) {
	if(active !== selected) {
		active = selected;
    playerControls.style.background = "linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.99) 100%), url("+sourceAudio[0].image+")";
		radio.source({
			type: 'audio',
			title: 'test',
      poster: sourceAudio[0].image,
			sources: sourceAudio
		});

		for(var i = 0; i < songs.length; i++) {
			if(Number(songs[i].getAttribute('data-id')) === selected) {
				songs[i].className = 'active';
			} else {
				songs[i].className = '';
			}
		}

		if(play) {
			radio.play();
		}
	} else {
		radio.togglePlay();
	}
}

function setArt(e) {
  console.log(e);
}

function nextSong(e) {
	var next = active + 1;

	if(next < songs.length) {
		setSource( getId(songs[next]), buildSource(songs[next]), true );
	}
}
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources