JSFiddle - React, Tailwind, and code Playground
by vlycser
HTML
<script src="https://raw.github.com/scottschiller/SoundManager2/master/script/soundmanager2-nodebug-jsmin.js"></script>
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Test Ex.fm API</title>
</head>
<body>
<h2>Testing Ex.fm API</h2>
<div id="list"></div>
</body>
</html>
JavaScript
console.log("Hi");
var lastSong;
soundManager.setup({
url: 'https://raw.github.com/scottschiller/SoundManager2/master/swf/',
useHTML5Audio: true,
preferFlash: false
});
function createSound(url, idSong){
soundManager.onready(function(){
soundManager.createSound({
id: idSong,
url: url
});
});
}
$.ajax({
url: "http://ex.fm/api/v3/trending",
dataType: "json",
success: function(data){
var songs = data.songs;
for(var i in songs){
var idSong = songs[i].id;
var title = songs[i].title;
var artist = songs[i].artist;
var url = songs[i].url;
$("#list").append("<p data-idSong='"+idSong+"' data-url='"+url+"'><a href='#'>"+title+" - "+artist+"</a></p>");
}
$("p").on("click", function(e){
console.log("click?");
e.preventDefault();
var url = $(this).attr("data-url");
var idSong = $(this).attr("data-idSong");
if(lastSong != idSong){
soundManager.stopAll();
createSound(url, idSong);
soundManager.play(idSong);
lastSong = idSong;
}else if(lastSong == idSong){
soundManager.togglePause(idSong);
...