javascript - Pause Youtube embed when playing Soundcloud embed -

i have music blog contains various embedded soundcloud , youtube players.

what want prevent audio playing simultaneously. in other words while playing youtube video, if click play soundcloud embed want youtube player pause , vice versa.

i have developed code pauses streaming youtube player if click play youtube player (soundcloud inherently). need make cross compatible. appreciate help, thanks.

var playercurrentlyplaying = null; var players = {} yt_ready(function() {    $(".youtube_embed").each(function() {        var identifier = this.id;        var frameid = getframeid(identifier);        if (frameid) {             players[frameid] = new yt.player(frameid, {                 events: {                     "onstatechange": function(event){                         if (event.data == yt.playerstate.playing)                         {                             if(playercurrentlyplaying != null &&                                playercurrentlyplaying != frameid)                             callplayer( playercurrentlyplaying , 'pausevideo' );                             playercurrentlyplaying = frameid;                         }                     }                 }             });         }    }); }); 

i have used functions these sources: listening youtube event in javascript or jquery

youtube iframe api: how control iframe player that's in html?

youtube api target (multiple) existing iframe(s)

rendered html using uniqueid():

<span class="soundcloud_embed" id="soundcloud_post_312">   <iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3a%2f%2fapi.soundcloud.com%2ftracks%2f103518792&show_artwork=true&secret_token=s-lnotk"></iframe> </span>  <span class="youtube_embed" id="youtube_post_309">   <iframe id="ui-id-2" width="528" height="190" src="//www.youtube.com/embed/y3cykxbetf0" frameborder="0" allowfullscreen></iframe> </span> 

first of all, things simplified if able id onto iframes themselves, this:

<span class="soundcloud_embed">   <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3a%2f%2fapi.soundcloud.com%2ftracks%2f4997623" id="sound1"></iframe> </span> <span class="soundcloud_embed">   <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3a%2f%2fapi.soundcloud.com%2ftracks%2f105153133" id="sound2"></iframe> </span> <span class="youtube_embed">   <iframe width="400" height="225" src="//www.youtube.com/embed/tv8wgleipbg" id="vid1" frameborder="0" allowfullscreen></iframe> </span> <span class="youtube_embed">   <iframe width="400" height="225" src="//www.youtube.com/embed/fmicu1gmaaw" id="vid2" frameborder="0" allowfullscreen></iframe> </span> 

if you'd prefer not hack auto_html gem mention in order ids, can either use jquery's .uniqueid() function generate them on iframes or use getframeid() helper method post referred (and seem using).

to make easy possible 2 apis (youtube , soundcloud) able respond each other's events, can use couple of control objects keep track of players on page , of them playing (this strategy similar employed links referred to, expanded able keep track of player belongs api). it, define generic pause function serves simplistic wrapper both apis:

var playercurrentlyplaying = {"api":null,"frameid":null}; var players = {"yt":{},"sc":{}};  pausecurrentplayer=function() {   var api=playercurrentlyplaying["api"],       frameid=playercurrentlyplaying["frameid"];    switch(api) {     case "yt":       players[api][frameid].pausevideo();       break;     case "sc":       players[api][frameid]["widget"].pause();       break;   } }; 

next, you'll want define 2 separate functions; first called whenever youtube play event captured, , second whenever soundcloud play event captured. soundcloud html5 widget has few bugs force necessity include pretty ugly hacks--namely, play event isn't fired when play soundcloud sound first time. luckily, play_progress event is, can leverage that, must include workaround doesn't create race condition when pausing sound , starting video:

onytplay =function(frameid) {   if (playercurrentlyplaying["frameid"]!=frameid && playercurrentlyplaying["frameid"]!=null) {      pausecurrentplayer();   }   playercurrentlyplaying["api"]="yt";   playercurrentlyplaying["frameid"]=frameid; };  onscplay=function(frameid,event) {   if (event==sc.widget.events.play||players["sc"][frameid]["firstplay"]==true) {      if (playercurrentlyplaying["api"]=="yt") { // because soundcloud player automatically paused soundcloud event, have worry if active player youtube         pausecurrentplayer();      }      playercurrentlyplaying["api"]="sc";      playercurrentlyplaying["frameid"]=frameid;      players["sc"][frameid]["firstplay"]=false;   } }; 

finally, can add hooks youtube embeds , soundcloud embeds, remembering hack have put in soundcloud play event. don't forget embed soundcloud widget api (<script src="w.soundcloud.com/player/api.js"; type="text/javascript"></script>), , use code bindings:

var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag);  function onyoutubeiframeapiready() {   $(".youtube_embed iframe").each(function() {     players["yt"][$(this).attr('id')] = new yt.player($(this).attr('id'), {       events: { 'onstatechange': onytplayerstatechange }     });   }); }  onytplayerstatechange = function(event) {   if (event.data==yt.playerstate.playing) {      onytplay(event.target.a.id);   } };  (function(){     $(".soundcloud_embed iframe").each(function() {       var frameid=$(this).attr('id');       players["sc"][frameid]={};       players["sc"][frameid]={"widget":sc.widget(document.getelementbyid(frameid)),"firstplay":true};       players["sc"][frameid]["widget"].bind(sc.widget.events.ready, function() {        players["sc"][frameid]["widget"].bind(sc.widget.events.play, function() {         onscplay(frameid,sc.widget.events.play);        });        players["sc"][frameid]["widget"].bind(sc.widget.events.play_progress, function() {         onscplay(frameid,sc.widget.events.play_progress);        });      });     });    }()); 

this approach set handle multiple players of both apis, , should decently extensible if want support other embeddable media widgets (provided expose event when start play , have ability programmatically pause players).