点击外部按钮播放soundcloud,无API

时间:2015-11-27 09:20:00

标签: jquery html5 wordpress iframe soundcloud

我在我的帖子中嵌入了soundcloud

<iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="'.esc_url('https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F'.$custom['soundcloud'][0].'').'"></iframe>

$custom['soundcloud'][0]是我可以在帖子中添加的帖子自定义类型,并且它是soundcloud上歌曲的ID。

我还覆盖了我的soundcloud iframe,用于加载默认播放器,并使用&#39; cover_over_soundcloud&#39;绝对定位的div,有一个播放按钮&#39;在它上面。

因此,当您点击它时,iframe应该开始播放。

&#13;
&#13;
    var $soundcloud_iframe = $('.soundcloud_iframe');

    if ($('.cover_over_soundcloud').length) {
      $('.play_button').on('click', function() {
        $(this).parent().fadeOut();
        $soundcloud_iframe.play();
      });
    }
&#13;
.cover_over_soundcloud {
  position: absolute;
  min-height: 200px;
  width: 100%;
  background: #fdfdfd;
  top: 0;
  left: 0;
  right: 0;
}
.cover_over_soundcloud .play_button {
  position: absolute;
  border: 3px solid #272727;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 50%;
  margin-left: -25px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.cover_over_soundcloud .play_button:after {
  content: "";
  position: absolute;
  top: 30%;
  left: 43%;
  border-left: 10px solid #272727;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cover_over_soundcloud">
  <div class="play_button"></div>
</div>
<iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F192479201"></iframe>
&#13;
&#13;
&#13;

现在,由于我使用soundcloud API,我无法使用官方soundcloud widget methods,尤其是.play(),这正是我所需要的。

有解决方法吗?

点击播放按钮只需要再次点击声音云播放按钮,这有点傻。

我隐藏它,因为它在我的网站上看起来并不好看,所以这是一种绕过它的方法。

1 个答案:

答案 0 :(得分:0)

检查以下内容。

而不是使用SoundClouds默认播放器将播放器放到另一个带有一些设置值的自定义页面上以拉动MP3,使其看起来像这样。

<iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="http://www.example.com/song.php?mp3=https://api.soundcloud.com/tracks/'.$id.'/stream?client_id='.$MyClientID.'"></iframe>

使用默认播放器并且不使用API​​时,您尝试做什么是不可能的,希望这会有所帮助。

<script type="text/javascript">
$(document).ready(function() {
$("#player4").flatie({
    media: {
    mp3: "<?php echo isset( $_GET['mp3'] ) ? $_GET['mp3'] : ''; ?>"
},
    swfPath: ""
});
});

</script>