외부 소스와 오디오 소스를 동기화하고 두 소스간에 크로스 페이드 볼륨을 만들려면 어떻게해야합니까?

Question

Chrome에서 작동하며 모든 YouTube, Vimeo, SoundCloud 또는 맞춤 URL을 허용 할 수있는 솔루션이 필요합니다.

나는이 작업으로 나를 도울 수있는 느낌이 Popcorn.js입니다.

Answer 1

여기 Popcorn.js 및 jQuery를 사용하여 a solution입니다 :

된 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> 

인라인 스크립트

function doPop() { 
    $("#choose").hide(); 
    $("#dopop").show(); 
    // create an 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 an 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(); 
});