是否有任何用于播放flac的crossbrowser解决方案？(或理论上可以制作一个)

Question

对silverlight不感兴趣.Flash/javascript/html5解决方案是可以接受的.

如果您不知道这样的解决方案,请问您是否可以这样做？

Answer 1

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

但是,Aurora播放器使用ScriptProcessorNode来动态解码音频块.出于多种原因,这并没有成功.

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

离线解码:Flac to Wave

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

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

注:在更换CLZ功能decoder.js与本地Math.clz32提高性能,并填充工具clz32旧的浏览器.

坏处

解码时间.大约5秒钟,在~100%CPU上获得"平均"4分钟的歌曲.

好处

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'} ) );
}

Answer 2

通过简单的谷歌搜索，我找到了这些网站：

\n\n

使用 Web Audio API 的 Aurora 和 FLAC.js \xe2\x80\x94 音频编解码器

\n\n

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

\n\n

不管你相信与否，这并不难。

\n\n

差点忘了：
\n检查HTML5Test以将浏览器性能/兼容性与该<audio>标记及其同级标记进行比较。

\n