Please help: how do I add a musical playlist to my website using HTML

1

Hey guys I am working on my first real life website and I want to include playable songs to the site (playlist) I already know I can do this by adding an audio tag but doing so I only know how to add the song’s src from my computer, which is not want I need… Please can someone show me how to get the songs from another website like sound cloud linked to the list of songs on my website.

Also I am building this site in HTML5, CSS3 with Bootstrap 4.

2

Here you go…

I’m using VueJS

DEMO:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <iframe width="100%" height="300" scrolling="no" frameborder="no" v-bind:src="musicURL"></iframe>
    <div style="margin-top:3em;">
      <b>Pick your music:</b>

        <button v-on:click="musicID = 262763857">Price Tag by Jesse J.</button>
        <button v-on:click="musicID = 41508861">Super Bass by Nicki Minaj</button>
        <button v-on:click="musicID = 115637399">Dark Horse by Katy Perry</button>

    </div>
  </div>
</body>

<script src="https://unpkg.com/vue"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      musicID: '262763857'
    },
    computed: {
      musicURL: function () {
        return 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + this.musicID + '&amp;color=%23ff5500&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true';
      }
    }
  })
</script>
3

Hi man…

I have a codepen project here… using online radio streaming… but you can do the same with audio tracks…

4

Thanks for the help Owel but here is what I am trying to do…

	<section id="song-list">
		<div class="container">
			<div class="col-sm-5 offset-1">
				<ul>
					<li><a href="">Bla Bla Bla - bla bla bla</a></li>
					<li><a href="">Bla Bla Bla - bla bla bla</a></li>
					<li><a href="">Bla Bla Bla - bla bla bla</a></li>
					<li><a href="">Bla Bla Bla - bla bla bla</a></li>
					<li><a href="">Bla Bla Bla - bla bla bla</a></li>
				</ul>
			</div>
		</div>
	</section>
5

If you just want a list that links to the song, just put the soundcloud url in your a href.

<li><a href="https://soundcloud.com/godsandalcoves/the-cure-a-forest-glastonbury">A Forest - The Cure</a></li>