Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

embedding audio playlist player (from codepen) into site


abstrkt

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...