Get audio from an html5 video

后端 未结 2 541
独厮守ぢ
独厮守ぢ 2021-01-31 06:07

Is it possible to get the audio from an mp4 or webm video element in HTML5?

I\'m trying to use https://github.com/corbanbrook/dsp.js to calculate FFTs for audio, however

相关标签:
2条回答
  • 2021-01-31 06:35

    Webm works as an audio source.

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

    0 讨论(0)
  • 2021-01-31 06:47

    Not sure if this answers your question but you can run the audio of the video through the Web Audio API node graph. The code below can be demonstrated by changing the gain and filter parameters. I only tested this on Chrome.

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

    The above code is a modified version of this : http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs

    I simply replaced the audio element with the video element.

    0 讨论(0)
提交回复
热议问题