javascript - How can I sync an audio source with an external video and crossfade volume between the two? -

i need solution works in chrome , can accept youtube, vimeo, soundcloud, or custom url.

i have feeling popcorn.js can me out task.

here's a solution using popcorn.js , jquery:

index.html

<div id="choose">   <p>audio url:     <input type="text" id="audio-url" />     <br/>(example: http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3)</p>   <br/>   <br/>   <p>video url:     <input type="text" id="video-url" />     <br/>( example: http://vimeo.com/73605534)</p>   <br/>   <br/>   <button id="doit">do it!</button> </div> <div id="dopop">   <button id="toggle">play/pause</button>   <br/>   <br/>   <input type="range" min="0" max="100" name="range" id="range" />   <br/>   <div id="source1">     <p> <span class="gain">source 1 gain: 1.0</span>          <br/>         <div id="audio"></div>     </p>   </div>   <hr/>   <div id="source2">     <p><span class="gain">source 2 gain: 1.0</span>          <br/>         <div id="video"></div>     </p>   </div> </div> 

inline script:

function dopop() {   $("#choose").hide();   $("#dopop").show();   // create instance of popcorn   var popcorn = popcorn.smart("#audio", $("#audio-url").val());   var popcorn2 = popcorn.smart("#video", $("#video-url").val());    popcorn.on('play', function () {     popcorn2.play();   });    popcorn.on('pause', function () {     popcorn2.pause();   });    popcorn2.on('play', function () {     popcorn.play();   });    popcorn2.on('pause', function () {     popcorn.pause();   });    var clicked = false;    $("#toggle").click(function () {     if (clicked) {         popcorn.pause();         clicked = false;     } else {         popcorn.play();         clicked = true;     }   });    $("#range").change(function () {     var x = parseint($(this).val()) / 100;     // use equal-power crossfading curve:     var gain1 = math.cos(x * 0.5 * math.pi);     var gain2 = math.cos((1.0 - x) * 0.5 * math.pi);     popcorn.volume(gain1);     popcorn2.volume(gain2);     $("#source1 .gain").text("source 1 gain: " + gain1);     $("#source2 .gain").text("source 2 gain: " + gain2);   });  }  $("#doit").click(function () {   dopop(); });