Skip to main content
chenjil43641795
Legend
May 2, 2018
Answered

HTML5 Sound Waveform Code,Want to convert to ANNCC can be used.

  • May 2, 2018
  • 1 reply
  • 484 views

I found a sound waveform code.

But ANCC is not available.

How to change.

As long as you can output floating-point numbers.

I want to make it into an animated lip system.

<canvas id="canvas" width="400" height="100"></canvas>

<audio id="audio" autoplay src="SuperMario.mp3"></audio>

<br/>

<input type="button" onclick="audio.play()" value="play" />

<input type="button" onclick="audio.pause()" value="stop" />

<script>

var AudioContext=AudioContext||webkitAudioContext;

var context=new AudioContext;

var media=context.createMediaElementSource(audio);

var processor=context.createScriptProcessor(4096,1,1);

var width=canvas.width,height=canvas.height;

var g=canvas.getContext("2d");

g.translate(0.5,height/2+0.5);

media.connect(processor);

processor.connect(context.destination);

processor.onaudioprocess=function(e){

  var input=e.inputBuffer.getChannelData(0);

  var output=e.outputBuffer.getChannelData(0);

  for(var i=0;i<input.length;i++)output=input;

  g.clearRect(-0.5,-height/2-0.5,width,height);

  g.beginPath();

  for(var i=0;i<width;i++)

    g.lineTo(i,height/2*output[output.length*i/width|0]);

  g.stroke();

};

</script>

    This topic has been closed for replies.
    Correct answer Joseph Labrecque

    I'd suggest having a look at the demos and documentation for SoundJS:
    CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

    1 reply

    Joseph Labrecque
    Community Expert
    Joseph LabrecqueCommunity ExpertCorrect answer
    Community Expert
    May 7, 2018

    I'd suggest having a look at the demos and documentation for SoundJS:
    CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

    chenjil43641795
    Legend
    May 7, 2018

    Thank you so much.

    My English is not good.

    A lot of annotations don't understand.

    There are no help manuals like AS3 PDF.

    EaselJS,HTML5.Many problems encountered in learning do not know the answer.

    Thanks again.