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. what you like to do is a security restriction. you cannot access iframes source if source is an external page. — Chris
after clicking your play button the script could change the SRC of iframe because there is an autoplay option see here. but read the wohle article: this does not work for mobile devices — Chris

Unknown Unknown · Accepted Answer · 2015-11-27T10:43:46

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>

Play soundcloud on external button click, no API

1 Answers