javascript - SoundCloud API: Using oEmbed to specify start and stop time for playing a track -
i have web application integrating soundcloud api searching , playing tracks. can stream tracks through api using soundcloud oembed so:
scope.playtrack = function(track) { sc.oembed(track.permalink_url, { auto_play: true }) .then(function(oembed) { scope.soundcloudwidget = $sce.trustashtml(oembed.html); scope.$apply(); }); };
with widget bound view:
<div ng-bind-html="soundcloudwidget"></div >
this working expected. issue stream track in way specified start , stop time. did research , found seemingly related stackoverflow question/answer mentions 1 can:
append #t=12s
sound's url start @ 12th second
this works when constructing url like:
https://soundcloud.com/griz/summer-97-ft-muzzy-bearr#t=54s
however, start = '54s'
this
scope.playtracksection = function(track, start) { sc.oembed(track.permalink_url, { auto_play: true, t: start }) .then(function(oembed) { scope.soundcloudwidget = $sce.trustashtml(oembed.html); scope.$apply(); }); };
or
scope.playtracksection = function(track, start) { var url = track.permalink_url + "#t=" + start; sc.oembed(track.permalink_url, { auto_play: true }) .then(function(oembed) { scope.soundcloudwidget = $sce.trustashtml(oembed.html); scope.$apply(); }); };
but no avail. is there possible way specify start time in type of context?
bonus points: additionally there possible way specify duration or time when streaming song should stop playing?
figured out. soundcloud widget api rescue!
in order access javascript object provides soundcloud widget api, add this script html page.
this script exposes
sc.widget(/*iframeelement|iframeelementid*/)
function global scope. allows control widget parent page (the page widget inserted into). sc.widget accepts reference iframe element or id.
so after adding script able this:
scope.playtracksection = function(track, starttime, endtime) { sc.oembed(track.permalink_url, { auto_play: true }) .then(function(oembed) { scope.soundcloudwidget = $sce.trustashtml(oembed.html); scope.$apply(); scope.iframe = document.getelementbyid('soundcloud_widget').queryselector('iframe'); scope.widget = sc.widget(scope.iframe); scope.widget.seekto(starttime); scope.widget.bind('playprogress', function(needle) { if (needle.currentposition >= endtime) { scope.widget.pause(); } }); }); };
with html:
<div id="soundcloud_widget" ng-bind-html="soundcloudwidget"></div>
it useful know scope.widget.bind('xxxx', ....)
can used bind several event types of widget api. if want things happen when user pauses, plays, finishes, seeks, etc. can hook these events.
Comments
Post a Comment