使用 ajax 加载 wav 文件

Posted 2023-02-25

【中文标题】使用 ajax 加载 wav 文件

【英文标题】：Loading a wav file using ajax

【发布时间】：2016-01-15 18:17:44

【问题描述】：

我有一个音频文件列表。我想要完成的是，每次当我从列表中单击一个文件时，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/ 的文件夹中。

【问题讨论】：

为什么首先需要使用 ajax 下载整个文件？您想解决哪些传统音频方法无法解决的问题？

@charlietfl 传统的方法是什么？我正在尝试从服务器获取文件，因此我可以使用 drawBuffer 函数显示波形。我该怎么做才能更好？

从 html5 开始，有新的音频 API 函数将有很大帮助，尤其是分解波形。见developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

【参考方案1】：

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

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

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

我希望这会有所帮助。