SoundCloud:播放按钮 [英] SoundCloud: play button
本文介绍了SoundCloud:播放按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只想要一个播放和停止按钮来替换SoundCloud中的原始按钮.我遵循了小部件API": http://developers.soundcloud.com/docs/api/html5-widget#
但这不起作用.我想我不太了解SoundCloud的说明.
I just want a play and stop button to substitute the original ones in SoundCloud. I followed the "Widget API" : http://developers.soundcloud.com/docs/api/html5-widget#
But it doen't work. I think I don't understand very well the SoundCloud instructions to do that.
我在这里玩: 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:
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()
});
})
推荐答案
好，这对我有用:
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播放器.
It now correctly controls the iframe player.
这是JSBin的完整示例:
This is the full working example from 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>
这篇关于SoundCloud:播放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
