请求修改Three.js音频可视化项目，支持用户选择本地音频文件

步骤1：添加文件选择控件到HTML #

先在页面中添加文件输入框，让用户能选择本地音频文件：

<input type="file" id="audioFileInput" accept="audio/*" style="margin: 10px;" />
<button class="button" style="display:none;">Play Audio</button>

步骤2：修改JavaScript逻辑 #

替换原本固定加载本地音频的代码，改成处理用户选择的文件：

const listener = new AudioListener();
camera.add(listener);

const sound = new Audio(listener);
const button = document.querySelector('.button');
const audioFileInput = document.getElementById('audioFileInput');

// 监听文件选择事件
audioFileInput.addEventListener('change', handleFileSelect);

function handleFileSelect(event) {
  const file = event.target.files[0];
  if (!file) return;

  button.innerHTML = "Loading Audio...";
  button.style.display = 'block';

  // 将本地文件读取为ArrayBuffer格式
  const reader = new FileReader();
  reader.onload = function(e) {
    // 利用AudioListener自带的AudioContext解码音频
    const audioContext = listener.context;
    audioContext.decodeAudioData(e.target.result, function(buffer) {
      sound.setBuffer(buffer);
      sound.setLoop(true);
      sound.setVolume(0.5);
      
      button.innerHTML = "Play Audio";
      // 绑定播放按钮点击事件
      button.onpointerdown = function() {
        sound.play();
        button.style.display = 'none';
        audioFileInput.style.display = 'none'; // 可选：播放后隐藏文件选择框
      };
    }, function(error) {
      console.error('音频解码失败:', error);
      button.innerHTML = "加载失败，请重新选择";
    });
  };
  reader.readAsArrayBuffer(file);
}

关键说明 #

• 文件选择限制：accept="audio/*"确保用户只能选择音频类型的文件，避免无效文件输入。
• 文件读取与解码：使用FileReader把本地文件转为音频解码所需的ArrayBuffer，再通过AudioContext解码成Three.js Audio对象可识别的AudioBuffer。
• 交互逻辑调整：用户选择文件后才显示加载状态，解码完成后切换为播放按钮，播放后可选择隐藏控件优化体验。

替换原代码注意事项 #

• 删除原代码中AudioLoader.load('audio file.mp3', ...)这段固定加载本地文件的逻辑。
• 确保HTML中的文件输入框ID与JS代码中的audioFileInput对应。

内容的提问来源于stack exchange，提问作者Alfie Harris