如何在 Flash 中创建一个音乐播放器来创建音频文件的波形？

Posted 2023-02-25

【中文标题】如何在 Flash 中创建一个音乐播放器来创建音频文件的波形？

【英文标题】：How would I create a music player in Flash that creates a waveform of the audio file?

【发布时间】：2010-01-16 18:50:00

【问题描述】：

我在各种网站上获得了三个基于 Flash 的音频播放器的屏幕截图，它们绘制了将要播放的剪辑的波形，并在播放时移动，还允许用户单击音频上的某个点文件并跳转到该点。

DJ 从http://www.djdownload.com下载音乐播放器

DJ Download Music Player http://img13.imageshack.us/img13/6739/djdownloadmusicplayer.png

来自http://www.soundcloud.com的SoundCloud音乐播放器

SoundCloud Music Player http://img5.imageshack.us/img5/6336/soundcloudmusicplayer.png

来自http://www.trackitdown.net的TrackItDown音乐播放器

TrackItDown Music Player http://img697.imageshack.us/img697/7392/trackitdownmusicplayer.png

我对 Flash 的了解很少，但这很容易实现吗？我只想将 Flash 文件显示为 mp3 并绘制波形。我知道这可能会占用 CPU 资源，所以是否有办法缓存波形数据，这样每次加载文件时就不会重绘？

【参考方案1】：

我自己以前从未这样做过，但据我所知情况如下。

如果您正在使用 Flash Player 10，那么您很幸运，否则您似乎必须在播放声音时计算频谱。就像在 Chris 的链接中一样，您可以使用 Sound.extract() 将声音对象中的声音数据放入 ByteArray（仅限 FP10）。然后通过ByteArray 读取值并根据值在屏幕上绘制一些东西。

在 FP9 上，您必须在 SoundChannel 上播放声音，并在播放时读取通道的左右峰值。我找到了这个示例代码 (link)

var snd:Sound = new Sound();
var req:URLRequest = new URLRequest("your track url");
var channel:SoundChannel;
var bytes:ByteArray = new ByteArray();

snd.load(req);
this.addEventListener(Event.ENTER_FRAME, enterFrameEvent);
channel = snd.play(0,3);    

function enterFrameEvent(event:Event):void  
    SoundMixer.computeSpectrum(bytes, true,0);
    // bytes has 512 values 0-255 leftchannel 256-512 right channel
    for (var i:Number = 0; i < 256; i++) 
        val = bytes.readFloat();
    

所以简而言之，尝试坚持使用 FP10，如果您能够做到这一点（没有客户端限制），您应该能够直接从 Chris 的链接中获取 Waveform 类并使用它。看起来该类还绘制了实际的波形（在提取音频数据的基础上），但您可以将绘图移至它自己的类或修改代码以获得您自己的波形外观。

【讨论】：

他的例子中的那些插图不是光谱显示。

不，它们不是，但代码让您了解如何从 Sound 对象获取音频数据。您如何处理这些数据取决于您。

【参考方案2】：

没试过，但谷歌搜索“as3 波形”发现了这篇博文（包含一些源代码的链接）

http://blog.efnx.com/flash-actionscript-3-waveform-generation-class/

【参考方案3】：

这个 Flashkit 板条目还提供了许多非常有趣的资源：

http://board.flashkit.com/board/showthread.php?t=653792

【参考方案4】：

您的示例中的插图生成方式或多或少如下：

计算宽度显示的每个像素的音频秒数。

对于从左到右的每个像素，计算文件相应段的平均 RMS 幅度。

这将为您提供该像素的峰值高度。在某些显示中，它是对称渲染的（即，它是从上到下镜像的），而在其他显示中，它是条形图样式。

（顺便说一下，从振幅显示中很容易看出它们是数字制作的音乐，可能是某种电子音乐）

【参考方案5】：

Chris - 感谢您链接到我的博客，这里是该课程的来源（只是为了使其更容易）。我不完全确定代码处于什么状态，正如我在 2 年前写这篇文章时写的那样，但它应该可以为任何需要它的人完成工作。 http://efnx.com/lab/WavePlotter/src/WavePlotter_Main_081024.src.tar.gz