CODEWITHSUNDEEP
javascriptjqueryhtml
knocked loose
knocked loose

Reputation: 3304

Playing music that is linked and not loaded?

This is probably an odd question, but for fun i recreated the Spotify layout to their app in codepen, now I want to add some functionality, is there a way I can get music to play using JS or jQuery?

My first thought was to embed the video and hide it behind the play button, but that doesn't quite work for me.

Is there a way I can set a var where I set it = to a url, then use an onclick or toggle command to play the url?

The only way I could think about going this would be:

var expirePrettyLow = 'url:www.fake.com'

$('#play').toggle(
    function(){
//play youtube link?

);

I hope this makes sense, is there an api I can call to just get the mp3s? I don't want to upload them since it's just linking, not trying to make a product out of this, just to add to portfolio.

For reference here is my codepen link.

Thanks for whatever advice/direction you can give me!

EDIT: To clarify, by 'linked' and not 'loaded' I would like to accomplish this by linking to a url (ie: href="") as opposed to saving it in my directory and loading it through a filepath (ie: music/tracks/expire-prettylow.mp3)

Upvotes: 3

Views: 130

Answers (2)

user5007680
user5007680

Reputation:

Set the src with JavScript, music.load(), then music.play()

Upvotes: 1

Damian Silva
Damian Silva

Reputation: 336

User a blank audio tag and set the play button's onClick to "var newSrc = newSource.com/song.mp3; playTrack()", and have the playTrack() function load and play the song. Here's an example of a code that changes the source of the audio element then plays the new source.

<script>
function playTrack(){
    var music = document.getElementById("myAudio");
    music.src = newSrc;
    music.load();
    music.play();
}
</script>
<audio id="myAudio" src="">
Audio tag not supported
</audio>
Click a song to play it:
<ul>
    <li onClick="newSrc = 'http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3'; playTrack()">People are Strange</li>
    <li onClick="newSrc = 'http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3'; playTrack()">Oh What a Night</li>
</ul>

Upvotes: 1

Related Questions