使用ajax加载wav文件

Question

I have a list of audio files. What I want to accomplish is that every time when I click on a file from the list, javascript loads the waveform of that audio file.

This is a function that draws the waveform:

function drawBuffer( width, height, context, data ) {
    var step = Math.ceil( data.length / width );
    var amp = height / 2;
    context.fillStyle = "silver";
    context.clearRect(0,0,width,height);
    for(var i=0; i < width; i++){
        var min = 1.0;
        var max = -1.0;
        for (j=0; j<step; j++) {
            var datum = data[(i*step)+j]; 
            if (datum < min)
                min = datum;
            if (datum > max)
                max = datum;
        }
        context.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp));
    }
}

On click I get the value selected from the list and request the php page that should return the file with that name:

function getAudioClip() {
        var x = document.getElementById("clips").value;
        $.get( "get_audio.php", { filename: x } )
          .done(function( data ) {
            loadAudioClip(data);
          });
    }

In the end the function loadAudioClip(data) should change the waveform:

function loadAudioClip(data) {
        var canvas = document.getElementById( "wavedisplay" );
        drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), data );
}

How should my get_audio.php look like. How should I get data. The files are in the folder called audio/.

Answer 1

HTML5 and includes an API to perform these operations in a simpler form.

I suggest you review the documentation for the plugin wavesurfer.js using all the features you are looking for.

Wavesurfer on Github: https://github.com/katspaugh/wavesurfer.js

I hope this helps.