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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -