2013-02-27 30 views
13

से ऑडियो जाओ यह एचटीएमएल 5 में एक mp4 या WebM वीडियो तत्व से ऑडियो पाने के लिए संभव है?HTML5 वीडियो

मैं https://github.com/corbanbrook/dsp.js उपयोग करने के लिए ऑडियो के लिए FFTs गणना करने के लिए, हालांकि, मैं केवल MP4 और WebM वीडियो कोशिश कर रहा हूँ।

उत्तर

17

सुनिश्चित नहीं हैं कि यह आपके सवाल का जवाब है, लेकिन आप वेब ऑडियो API नोड ग्राफ के माध्यम से वीडियो के ऑडियो चला सकते हैं। लाभ और फ़िल्टर पैरामीटर को बदलकर नीचे दिया गया कोड प्रदर्शित किया जा सकता है। मैंने केवल क्रोम पर इसका परीक्षण किया।

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title></title> 
<body> 

</body> 


<script> 

var video = document.createElement("video"); 
video.setAttribute("src", "ourMovie.mov"); 

video.controls = true; 
video.autoplay = true; 
document.body.appendChild(video); 

var context = new webkitAudioContext(); 
var gainNode = context.createGain(); 
gainNode.gain.value = 1;     // Change Gain Value to test 
filter = context.createBiquadFilter(); 
filter.type = 2;       // Change Filter type to test 
filter.frequency.value = 5040;   // Change frequency to test 

// Wait for window.onload to fire. See crbug.com/112368 
window.addEventListener('load', function(e) { 
    // Our <video> element will be the audio source. 
    var source = context.createMediaElementSource(video); 
    source.connect(gainNode); 
    gainNode.connect(filter); 
    filter.connect(context.destination); 

}, false); 


</script> 

ऊपर कोड इस का एक संशोधित संस्करण है: http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs

मैं बस वीडियो तत्व के साथ ऑडियो तत्व बदल दिया।

+0

नहीं जानते हैं कि आप वीडियो तत्वों पर कि चला सकते हैं! धन्यवाद, यह वही है जो मैं चाहता था! – jreptak

+0

अच्छा, वास्तव में उपयोगी पोस्ट! – ejectamenta

+0

'webkitAudioContext' मान्य नहीं है। कृपया इसके बजाय 'ऑडियोकॉन्टेक्स्ट' का उपयोग करें। –

0

Webm एक ऑडियो स्रोत के रूप में काम करता है।

<audio controls="controls" class="full-width" preload="metadata"> 
 
    <source src="//rack.international/samples/sample.webm" type="audio/mpeg"> 
 
</audio>

<video src="https://rack.international/samples/sample.webm" controls> 
 
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
 
</video>

संबंधित मुद्दे