Angular.js SoundCloud player widget directive

soundcloudplayer.js

angular.module('ngApp')
  .directive('soundCloudPlayer', function () {
    return {
      restrict: 'E',
      template: '<iframe width="100%" height="465" scrolling="no" frameborder="no"></iframe>',
      link: function (scope, element, attrs) {
        var iframe = element.find('iframe');
        var settings = [
          'buying=false',
          'liking=false',
          'download=false',
          'sharing=false',
          'show_artwork=true',
          'show_comments=false',
          'show_playcount=true',
          'show_user=true',
          'hide_related=true',
          'visual=true',
          'start_track=0',
          'callback=true'
        ];
        var url = attrs.url + '?' + settings.join('&');
        iframe.attr('src', 'https://w.soundcloud.com/player/?url=' + url);
        SC.Widget(iframe.get(0));
      }
    };
  });

Dependencies

Depends on https://w.soundcloud.com/player/api.js

<script src="https://w.soundcloud.com/player/api.js"></script>

Usage

In your HTML template

<div class="embed">
  <sound-cloud-player url="https://soundcloud.com/skepta/ojuelegba-remix-ft-drake-skepta"></sound-cloud-player>
</div>

Resources

https://developers.soundcloud.com/blog/html5-widget-api
https://developers.soundcloud.com/docs/api/html5-widget