Question

我有一个音频文件列表。我想要实现的是，每当我点击列表中的文件时，javascript都会加载该音频文件的波形。

这是绘制波形的函数：

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));
    }
}

点击后，我从列表中选择了值，并请求应该返回该名称的文件的php页面：

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

最后，函数loadAudioClip(data)应该改变波形：

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

我的get_audio.php怎么样？我该如何获取数据。这些文件位于名为audio /.

的文件夹中

Answer 1

HTML5并包含一个API，以更简单的形式执行这些操作。

我建议您使用所需的所有功能查看插件wavesurfer.js的文档。

Github上的Wavesurfer：https://github.com/katspaugh/wavesurfer.js

我希望这会有所帮助。

使用ajax加载wav文件

1 个答案: