Play soundcloud on external button click, no API

Question

I have soundcloud embedded in my post as

<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>

Where $custom['soundcloud'][0] is a post custom type that I can put in my post, and it's the id of the song on soundcloud.

I have also covered my soundcloud iframe which loads the default player, with a 'cover_over_soundcloud' absolutely positioned div that has a 'play button' on it.

So when you click it, the iframe should begin playing.

    var $soundcloud_iframe = $('.soundcloud_iframe');

    if ($('.cover_over_soundcloud').length) {
      $('.play_button').on('click', function() {
        $(this).parent().fadeOut();
        $soundcloud_iframe.play();
      });
    }

.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;
}

<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>

Now, since I'm not using soundcloud API, I cannot use the official soundcloud widget methods, especially .play() which is what I'd need.

Is there a workaround for this?

It's kinda silly to have to click on a play button only to have to click again on the soundcloud play button.

I'm hiding it, because it doesn't look nice on my site as is, so this is a way to go around it.

this question is similar to this [post](http://stackoverflow.com/questions/14913649/how-to-change-background-color-of-external-page-loaded-into-iframe). what you like to do is a security restriction. you cannot access iframes source if source is an external page. — Chris, Nov 27 '15 at 09:33
after clicking your play button the script could change the SRC of iframe because there is an autoplay option [see here](http://shareandembed.help.soundcloud.com/customer/portal/articles/2167173-visual-embedded-player-). but read the wohle article: this does not work for mobile devices — Chris, Nov 27 '15 at 10:23

score 0 · Answer 1 · answered Nov 27 '15 at 10:43

0

Check below.

Instead of using SoundClouds default player throw your player onto another custom page with some isset values to pull the MP3 so it would look something like this.

<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>

How ever what you're trying to do is not possible using their default player and not using an API, hope this helps.

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

</script>

answered Nov 27 '15 at 10:43

1

`flatie` is a different player? – dingo_d Nov 27 '15 at 11:31
@dingo_D sorry I was mobile, that's one of my players - just change it to fit your request, with the method shown above you use the same method you are now but instead of pulling SoundCloud iframe you pull the mp3 of the audio that way you can create your own player. I mentioned this because you said you didn't like how the current one looked on your website. – Nov 27 '15 at 12:20
Yeah, this is an option, but was not the solution I was looking for. Thanks for the effort tho. – dingo_d Nov 27 '15 at 12:27

Play soundcloud on external button click, no API

1 Answers1