js如何实现下载wav文件

HTML5 的 <a> 标签提供了一个 download 属性，可以用来创建一个指向文件的下载链接。通过设置这个属性，用户点击链接时，浏览器会自动下载文件而不是打开它。

<a id="downloadLink" href="path/to/your/file.wav" download="example.wav">Download WAV</a>

在 JavaScript 中，我们可以动态创建和触发这个链接：

function downloadWavFile(url, fileName) {

    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
// 调用函数
downloadWavFile('path/to/your/file.wav', 'example.wav');

二、通过 Blob 对象创建 WAV 文件

Blob 对象表示一个不可变、原始数据的类文件对象。我们可以使用 Blob 对象来生成 WAV 文件，并通过 URL.createObjectURL 方法创建一个指向该 Blob 对象的 URL。

function createAndDownloadWavFile(data, fileName) {

    const blob = new Blob([data], { type: 'audio/wav' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}
// 示例数据
const wavData = new Uint8Array([/* WAV 文件的数据 */]);
createAndDownloadWavFile(wavData, 'example.wav');

三、使用 Fetch API 下载文件

Fetch API 提供了一个接口，用于获取资源。我们可以使用 fetch API 下载 WAV 文件，然后将其转换为 Blob 对象并触发下载。

async function fetchAndDownloadWavFile(url, fileName) {

    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const blob = await response.blob();
        const downloadUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(downloadUrl);
    } catch (error) {
        console.error('Failed to download WAV file:', error);
    }
}
// 调用函数
fetchAndDownloadWavFile('path/to/your/file.wav', 'example.wav');

四、结合 Web Audio API 生成音频文件

Web Audio API 是一个强大的工具，允许我们直接在浏览器中创建、处理和分析音频。我们可以使用 Web Audio API 生成音频数据，并将其保存为 WAV 文件。

function generateAndDownloadWavFile(fileName) {

    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const sampleRate = audioContext.sampleRate;
    const duration = 2; // 2 seconds
    const frameCount = sampleRate * duration;
    const audioBuffer = audioContext.createBuffer(1, frameCount, sampleRate);
    const data = audioBuffer.getChannelData(0);
    // 生成正弦波
    for (let i = 0; i < frameCount; i++) {
        data[i] = Math.sin(2 * Math.PI * 440 * i / sampleRate);
    }
    // 将 AudioBuffer 转换为 WAV 文件
    const wavData = audioBufferToWav(audioBuffer);
    createAndDownloadWavFile(wavData, fileName);
}
function audioBufferToWav(buffer) {
    const numOfChan = buffer.numberOfChannels;
    const length = buffer.length * numOfChan * 2 + 44;
    const bufferArray = new ArrayBuffer(length);
    const view = new DataView(bufferArray);
    const channels = [];
    let offset = 0;
    let pos = 0;
    // 写 WAV 文件头
    setUint32(0x46464952); // "RIFF"
    setUint32(length - 8); // 文件大小
    setUint32(0x45564157); // "WAVE"
    // 写 fmt 子块
    setUint32(0x20746d66); // "fmt "
    setUint32(16);         // 子块大小
    setUint16(1);          // PCM 格式
    setUint16(numOfChan);  // 通道数量
    setUint32(buffer.sampleRate); // 采样率
    setUint32(buffer.sampleRate * 2 * numOfChan); // 每秒字节数
    setUint16(numOfChan * 2); // 每帧字节数
    setUint16(16);            // 每个样本的位数
    // 写 data 子块
    setUint32(0x61746164); // "data"
    setUint32(length - pos - 4); // 数据块大小
    // 写音频数据
    for (let i = 0; i < buffer.numberOfChannels; i++) {
        channels.push(buffer.getChannelData(i));
    }
    while (pos < length) {
        for (let i = 0; i < numOfChan; i++) {
            const sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
            view.setInt16(pos, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
            pos += 2;
        }
        offset++;
    }
    return bufferArray;
    function setUint16(data) {
        view.setUint16(pos, data, true);
        pos += 2;
    }
    function setUint32(data) {
        view.setUint32(pos, data, true);
        pos += 4;
    }
}
// 调用函数
generateAndDownloadWavFile('example.wav');