SoundCloud：播放按钮

我只想播放和停止按钮来替换SoundCloud中的原始播放按钮。我遵循“Widget API”：http://developers.soundcloud.com/docs/api/html5-widget#
但它不工作。我认为我不太了解SoundCloud的说明。SoundCloud：播放按钮

我在这里玩： http://jsfiddle.net/wBTCh/1/

HTML：

<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script> 

    <iframe id="so" width="100%" height="160" scrolling="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/users/1539950/favorites" frameborder="0" ></iframe> 

    <div id="playSound"></div> 
    <div id="stopSound"></div>

CSS：

#so{ 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

#playSound{ 
    position: absolute; 
    top: 200px; 
    left: 20px; 
    width: 20px; 
    height: 20px; 
    background-color: blue; 
} 

#stopSound{ 
    position: absolute; 
    top: 200px; 
    left: 50px; 
    width: 20px; 
    height: 20px; 
    background-color: green; 
}

JAVASCRIPT/JQUERY：

$(function(){ 

    var iframeElement = document.querySelector('iframe'); 
    var iframeElementID = iframeElement.id; 
    var widget1   = SC.Widget("#so"); 
    var widget2   = SC.Widget("#so"); 
    // widget1 === widget2 

    $("#playSound").click(function() { 
     $("#so").play() 
    }); 

    $("#stopSound").click(function() { 
     $("#so").pause() 
    }); 

})

来源

2012-08-03 Nrc

对不起，：究竟哪里是你的问题，你有什么话想解决这个问题？ – 2012-08-03 13:33:19

我看到一个播放按钮和一个暂停按钮，您可能正在使用旧的浏览器。至于一个停止按钮，我已经查看了一些文档，我找不到提及添加一个，所以...是啊不知道我还能说什么 – Sammaye 2012-08-03 13:35:31

好吧，我明白你现在想做什么，我不认为你按照文档告诉你的方式完成。你必须添加一个脚本到你的页面上面说的那么你需要用'var w = SC.Widget（$（'＃so'）。get（））;''来初始化脚本。事件''w.play（）' – Sammaye 2012-08-03 13:45:48

确定这是为我工作：

JS：

var widget1 = SC.Widget("so"); 

$(function(){ 
    $("#playSound").click(function() { 
     widget1.play(); 

    }); 

    $("#stopSound").click(function() { 
     widget1.pause() 
    }); 
})

HTML：

<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script> 

<iframe id="so" width="100%" height="160" scrolling="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/users/1539950/favorites" frameborder="0" ></iframe> 

<div id="playSound"></div> 
<div id="stopSound"></div>

现在正确地控制iframe的球员。

这是JSBin完整工作示例：

<!DOCTYPE HTML> 
<head> 

<meta charset="UTF-8"> 
    <title></title> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
<!-- SoundCloud--> 
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script> 
    <script type="text/javascript"> 


    $(function(){ 
     var widget1 = SC.Widget("so"); 

     $("#playSound").click(function() { 
      widget1.play(); 

     }); 
     $("#stopSound").click(function() { 
      widget1.pause(); 
     });  
    }); 
    </script> 


    <style type="text/css"> 
    <!-- 

    #so{ 
     position: absolute; 
     top: 20px; 
     left: 20px; 
    } 

    #playSound{ 
     position: absolute; 
     top: 200px; 
     left: 20px; 
     width: 20px; 
     height: 20px; 
     background-color: blue; 
    } 

    #stopSound{ 
     position: absolute; 
     top: 200px; 
     left: 50px; 
     width: 20px; 
     height: 20px; 
     background-color: green; 
    } 
     

    --> 
    </style> 
</head> 

<body> 

<iframe id="so" width="100%" height="160" scrolling="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/users/1539950/favorites" frameborder="0" ></iframe> 

<div id="playSound"></div> 
<div id="stopSound"></div> 



</body> 
</html>

来源

2012-08-03 14:13:46 Sammaye

它的作品！我仍然不明白你是如何从SoundCloud的指示中获得的。我尝试它在这里，它的工作原理：http://jsfiddle.net/wBTCh/2/ 但是，当我在Dreamweaver中复制粘贴它不起作用。我不明白为什么。所以我尝试了JSBin。因为它将所有代码一起显示出来：http://jsbin.com/usoxek/1/edit任何想法都可能是问题所在？ – Nrc 2012-08-03 15:07:00

@Narcís好的我已经修复了你在JSBin中给出的版本，这是因为iframe在文件完全加载时没有被分配，所以JS刚刚运行时没有准备好iframe的内容，tbh有点烂SoundClouds的一部分，但我想易用性和所有。 – Sammaye 2012-08-03 15:24:57

好的完美。在这里，我将这个例子留在JSBin中。如果有人需要看到它的工作：http://jsbin.com/usoxek/5/edit非常感谢你！ – Nrc 2012-08-03 16:24:56

SoundCloud：播放按钮

回答

相关问题