如何在React.js中为用户提供音频转换后的可下载链接

Hey Greg, let's work through your download link issue step by step. I've gone through your code and spotted a few key problems that are preventing the download from working correctly, plus some fixes to make the whole flow more reliable.

Key Issues in Your Current Code #

• Missing Download Link Element: Your make_download function tries to grab an element with ID download_link, but there's no such element in your ConverterSec2 component. This means you're trying to set properties on null, which does nothing.
• Typo in WAV Header Function: You named a function setUnit32 instead of setUint32 (note the lowercase 'i') in bufferToWave. This breaks the WAV file header writing, leading to corrupted audio even if the download worked.
• Uncontrolled Form Submission: Your form doesn't prevent default submit behavior, so clicking "Convert" refreshes the page immediately and cuts off audio processing.
• Undefined fileInput: The generateFileName function uses fileInput but never defines it—you need to properly reference the input element.
• Misplaced Log Message: Your startRendering().then() callback logs an error message when processing succeeds, which is confusing.

Fixed Code Implementation #

1. Updated ConverterSec2.jsx

Added the missing download link, prevented form refresh, and tied everything to a submit handler:

import React, { Component } from 'react';

class ConverterSec2 extends Component {
  handleSubmit = (e) => {
    e.preventDefault(); // Stop page refresh on submit
    const fileInput = document.getElementById('audio-file');
    
    if (!fileInput.files.length) {
      alert('Please select an audio file first!');
      return;
    }
    
    // Trigger the conversion process
    convertAudio(fileInput.files[0]);
  };

  render() {
    return (
      <div className="sec2">
        <form onSubmit={this.handleSubmit}>
          <input
            type="file"
            id="audio-file"
            name="file"
            accept="audio/mpeg, audio/ogg, audio/*"
          />
          <button type="Submit" id="convert_btn">Convert to 432Hz</button>
          {/* Hidden download link to trigger downloads */}
          <a id="download_link" style={{ display: 'none' }}></a>
        </form>
      </div>
    );
  }
}

export default ConverterSec2;

2. Revised converting.js

Fixed typos, added proper flow control, and automated the download trigger:

// Handle full audio conversion flow
function convertAudio(file) {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const reader = new FileReader();

  reader.onload = (event) => {
    audioContext.decodeAudioData(event.target.result, (buffer) => {
      // Set up offline context for processing
      const offlineAudioCtx = new OfflineAudioContext(
        buffer.numberOfChannels,
        buffer.length,
        buffer.sampleRate
      );

      // Apply 432Hz pitch shift (432/440 ratio for standard tuning)
      const source = offlineAudioCtx.createBufferSource();
      source.buffer = buffer;
      source.playbackRate.value = 432 / 440;
      source.connect(offlineAudioCtx.destination);
      source.start();

      // Render and prepare download
      offlineAudioCtx.startRendering()
        .then((renderBuffer) => {
          console.log("✅ Audio processed successfully!");
          make_download(renderBuffer, renderBuffer.length, file.name);
        })
        .catch((error) => {
          console.error("❌ Processing failed:", error);
        });
    });
  };

  reader.readAsArrayBuffer(file);
}

// Prepare and trigger download
function make_download(abuffer, total_samples, originalFileName) {
  const blob = bufferToWave(abuffer, total_samples);
  const fileUrl = URL.createObjectURL(blob);
  const downloadLink = document.getElementById("download_link");

  if (!downloadLink) {
    console.error("Download link element not found!");
    return;
  }

  downloadLink.href = fileUrl;
  downloadLink.download = generateFileName(originalFileName);
  downloadLink.click(); // Auto-trigger download

  // Clean up object URL to avoid memory leaks
  setTimeout(() => URL.revokeObjectURL(fileUrl), 1000);
}

// Generate 432Hz-specific filename
function generateFileName(originName) {
  const extIndex = originName.lastIndexOf('.');
  const baseName = originName.slice(0, extIndex);
  return `${baseName}_432hz.wav`;
}

// Convert AudioBuffer to WAV Blob (fixed typo)
function bufferToWave(abuffer, len) {
  const numOfChan = abuffer.numberOfChannels;
  const length = len * numOfChan * 2 + 44;
  const buffer = new ArrayBuffer(length);
  const view = new DataView(buffer);
  const channels = [];
  let i, sample, offset = 0, pos = 0;

  // Write WAV header
  setUint32(0x52494646); // "RIFF"
  setUint32(length - 8);
  setUint32(0x57415645); // "WAVE"
  setUint32(0x666d7420); // "fmt " chunk
  setUint32(16); // Chunk length
  setUint16(1); // PCM format
  setUint16(numOfChan);
  setUint32(abuffer.sampleRate);
  setUint32(abuffer.sampleRate * 2 * numOfChan); // Avg bytes/sec
  setUint16(numOfChan * 2); // Block align
  setUint16(16); // 16-bit depth
  setUint32(0x64617461); // "data" chunk
  setUint32(length - pos - 4); // Data length

  // Interleave audio channels
  for (i = 0; i < numOfChan; i++) {
    channels.push(abuffer.getChannelData(i));
  }

  while (pos < length) {
    for (i = 0; i < numOfChan; i++) {
      sample = Math.max(-1, Math.min(1, channels[i][offset])); // Clamp to valid range
      sample = (sample < 0 ? sample * 32768 : sample * 32767) | 0; // Scale to 16-bit int
      view.setInt16(pos, sample, true);
      pos += 2;
    }
    offset++;
  }

  return new Blob([buffer], { type: "audio/wav" });

  // Fixed typo from setUnit32 to setUint32
  function setUint16(data) {
    view.setUint16(pos, data, true);
    pos += 2;
  }

  function setUint32(data) {
    view.setUint32(pos, data, true);
    pos += 4;
  }
}

What Changed? #

• Added the hidden download_link element so the download function can find it
• Prevented form submission from refreshing the page
• Fixed the critical setUnit32 typo to ensure valid WAV files
• Added a full conversion flow that handles file reading, decoding, and 432Hz tuning
• Automatically triggers the download once processing finishes
• Cleaned up memory by revoking the Object URL after download
• Made filenames clearer by appending _432hz to the original name

内容的提问来源于stack exchange，提问作者Greg Disc