Playing music that is linked and not downloaded?
This is probably a weird question, but for fun, I recreated the Spotify layout in my app in codepen, now I want to add some functionality, is there a way I can get the 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 work for me.
Is there a way to set var
where I set it =
to url and then use a command onclick
or toggle
to play the url?
The only way I could think of is this:
var expirePrettyLow = 'url:www.fake.com'
$('#play').toggle(
function(){
//play youtube link?
);
Hope this makes sense, is there an api I can call to just get the mp3? I don't want to upload them as it just links, not trying to make a product out of it, just to add to the portfolio.
For reference: codepen link .
Thanks for any advice / direction you can give me!
EDIT: To clarify, "linked" and not "loaded" I would like to accomplish this by linking to a URL (ie href=""
), as opposed to saving it to my directory and downloading it via a file path (ie: music/tracks/expire-prettylow.mp3
)
source to share
User empty sound tag and set the onClick play button to "var newsrc = newSource.com/song.mp3; playTrack ()" and load the playTrack () function and play the song. Here's a sample code that changes the source of an 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>
source to share