如何在一个文件中下载一组音频文件

Question

我正在尝试制作一个音板网络应用程序，您可以在其中将音频文件添加到网站，它们将存储在索引数据库中，然后被提取和播放。

我还在考虑添加一个功能，让您将整个音频文件包下载为单个文件，以便其他人能够导入您的包。 数据看起来像这样：

const data = [
  {
    title: 'audio1',
    description: 'blabla'
    audio: AudioBuffer //or some other buffer
  },{
    title: 'audio2',
    description: 'blablabla'
    audio: AudioBuffer
  }
]

问题是，我将如何将其下载为单个文件？可能有一种方法可以处理 blob 等，但我不知道在哪里寻找。 显然，我还必须将其解码后才能使用

Answer 1

避免使用外部库并保持应用程序精简是值得的。考虑构建一个可下载的二进制文件，其结构如下：

*************************************************
|  MARKER  |  META  |  AUDIO  |  AUDIO  |  ...  |  
*************************************************

// Example 32 MiB audio buffers
const audio1 =   new Uint8Array(32 * 1024**2 /   Uint8Array.BYTES_PER_ELEMENT)
const audio2 = new Float32Array(32 * 1024**2 / Float32Array.BYTES_PER_ELEMENT)
​
// Metadata for your file
const meta = new TextEncoder().encode(JSON.stringify([
  { title: 'audio1', length: audio1.byteLength }, 
  { title: 'audio2', length: audio2.byteLength }, 
]))
​
// use 32-bit integer to store byte index where audio begins (metadata ends)
const marker = new Uint32Array([
  meta.byteLength + 4 // include 4 bytes for this 32-bit integer
])
​
function initDownload() {
  const a = document.createElement('a')
  a.href = URL.createObjectURL(new Blob([
    marker,
    meta,
    audio1,
    audio2,
  ], { type: 'application/octet-stream' }))
  a.download = 'saved-audio-project.bin'
  a.click()
}

function parseFile(buffer) {  // ArrayBuffer of file
  const metaLength = new DataView(buffer).getUint32(0, true)
  let readOffset = 4 // 4-byte marker length
  const audioFiles = JSON.parse(
    new TextDecoder().decode(
      buffer.slice(readOffset, readOffset += metaLength)
    )
  )  
  audioFiles.forEach(audio => audio.data = new Float32Array(
    buffer.slice(readOffset, readOffset += audio.length)
  ))
  return audioFiles
}