12

Not interested in silverlight. Flash/javascript/html5 solutions are acceptable.

If you do not know such solutions, could you please say is it possible to make such that or not?

4

2 回答 2

7

当我不得不在浏览器中玩 FLAC 时，我的出发点也是Aurora 框架。

但是，Aurora 播放器使用ScriptProcessorNode来动态解码音频块。由于很多原因，这并没有成功。

  1. 在 Aurora 中寻找 Flac 从未实现过。
  2. Firefox 中的卡顿和不可接受的性能，即使在 2014 年的中端桌面上也是如此。
  3. 将解码卸载到 WebWorker 是不可行的。
  4. 不与浏览器支持的音频格式互操作。
  5. 我不想负责重新采样 Aurora 必须吸收的采样率、搜索和其他低级音频任务。

离线解码：Flac 到 Wave

我的解决方案是使用精简的 Aurora.js 资产类 + 依赖项将 Flac 解码为原始 16 位 PCM 音频。
查看Asset.get ('format', callback)、Asset.fromFile和Asset.prototype.decodeToBuffer的源代码。

接下来，获取音频数据以及采样率和通道数的提取值，并构建一个 WAVE 文件。这可以使用 HTML5 音频元素播放，使用createMediaElementSource通过音频图发送，或者您可以使用本机支持的音频格式执行的任何操作。

注意：将 decoder.js 中的 clz 函数替换为原生Math.clz32以提高性能，并为旧浏览器填充 clz32。

坏处

解码时间。一首“平均”4 分钟的歌曲在约 100% CPU 的情况下大约需要 5 秒。

优点

  1. Blob（与 arraybuffer 相对）不受 RAM 的限制，浏览器可以将其交换到磁盘。原始 Flac 数据也可能会被丢弃。
  2. 您可以免费寻找。
  3. 您可以免费获得采样率重新采样。
  4. 在 WebWorker 中预先支付的 CPU 活动。
  5. 浏览器是否应该获得原生 Flac 支持，很容易被淘汰。它不会对 Aurora 产生强烈依赖。

这是构建 WAVE 标头的函数，并将原始 PCM 数据转换为浏览器可以本地播放的内容。

function createWave( audioData, sampleRate, channelCount )
{
    const audioFormat  = 1, // 2    PCM = 1
    subChunk1Size= 16,      // 4    PCM = 16
    bitsPerSample= 16,      // 2
    blockAlign   = channelCount * (bitsPerSample >> 3), // 2
    byteRate     = blockAlign * sampleRate,             // 4
    subChunk2Size= blockAlign * audioData.size,         // 4
    chunkSize    = 36 + subChunk2Size,                  // 4
    // Total header size 44 bytes
    header = new DataView( new ArrayBuffer(44) );


    header.setUint32( 0, 0x52494646 ); // chunkId=RIFF
    header.setUint32( 4, chunkSize, true );
    header.setUint32( 8, 0x57415645 ); // format=WAVE
    header.setUint32( 12, 0x666d7420 ); // subChunk1Id=fmt
    header.setUint32( 16, subChunk1Size, true );

    header.setUint16( 20, audioFormat, true );
    header.setUint16( 22, channelCount, true );

    header.setUint32( 24, sampleRate, true );
    header.setUint32( 28, byteRate, true );

    header.setUint16( 32, blockAlign, true );
    header.setUint16( 34, bitsPerSample, true );

    header.setUint32( 36, 0x64617461 ); // subChunk2Id=data
    header.setUint32( 40, subChunk2Size, true );

    return URL.createObjectURL( new Blob( [header, audioData], {type: 'audio/wav'} ) );
}
于 2015-01-20T04:28:27.633 回答
3

一个简单的谷歌搜索把我带到了这些网站：

Aurora 和 FLAC.js — 使用 Web Audio API 的音频编解码器

FLAC.js 简介：纯 JavaScript FLAC 解码器

信不信由你，这并不难。

差点忘了：
检查HTML5Test以比较浏览器与<audio>标签及其兄弟的性能/兼容性。

于 2013-12-13T00:36:20.843 回答