- 19~Blog |- 360° FLASH MP3播放器-19~waveCircle

Search the Site

360° FLASH MP3播放器-19~waveCircle

By19.Published on2010-05-4.

提供下载：360° FLASH MP3播放器-19~waveCircle，此播放器包括了歌词同步和很炫的波谱效果~

这是我参考了schillmania.com提供的源码，他所提供的是AS+JS版，我也不明白为什么他不直接写成FLASH，大家有兴趣可以点击链接去看看原AS+JS版的效果。我参考了部分写法（其实我只参考了他的设计思路，真正挪用的源码只有SoundProcessor这一个类，其余的部分全是按照自己想法在写），并且加入了相关的列表播放、歌词同步、波谱缓冲及个性化配置等功能，改了一个纯FLASH的播放器。

整个播放器自适应大小，你可以随意调整高宽，通过不同配置(例如歌曲地址、歌词lrc地址、字体颜色大小、布局、波形颜色等)，生成不同大小及颜色的播放器。以下为此播放器的所有配置：

播放器的相关配置:

//是否自动播放 yes(自动) no random(随机)
public static var autoPlay : String = "no";
 
//上边FPS空出的距离
public static var topFpsSpace : Number = 30;
//下边MP3歌曲名空出的距离
public static var bottomTitleSpace : Number = 25;
//下边歌词空出的距离
public static var bottomLrcSpace : Number = 25;
 
//显示波谱的距离
public static var waveSpace : Number = 20;
 
//圆环的宽
public static var radius : Number = 35;
 
//影片质量
public static var quality : String = "medium";
 
//主背景颜色
public static var backgroundColor : uint = 0xFFFFFF;
 
//FPS的颜色和字体
public static var fpsTextColor : uint = 0x333333;
public static var fpsTextFace : String = "Georgia";
//是否显示FPS
public static var fps : Boolean = false;
//FPS的上部填充
public static var fpsMargin : Number = 15;
 
//BAR的高度
public static var barH : Number = 23;
//BAR的背景
public static var barBg : Number = 0xF7F7F7;
//BAR的边框
public static var barBorderColor : Number = 0xDDDDDD;
 
//按钮移入左上边框颜色
public static var barButtonLTOverColor : uint = 0x999999;
//按钮移入右下边框颜色
public static var barButtonRBOverColor : uint = 0x333333;
 
//按钮激活状态的背景1
public static var barButtonOnBg1 : uint = 0xFFFFFF;
//按钮激活状态的背景2
public static var barButtonOnBg2 : uint = 0xDDDDDD;
 
//提示工具的透明度
public static var toolTipsAlpha : Number = 0.9;
//提示工具的边框色
public static var toolTipsBorderColor : uint = 0x222222;
//提示工具的背景色
public static var toolTipsBackgroundColor : uint = 0xffffff;
//提示工具的字体色
public static var toolTipsTextColor : uint = 0x333333;
//提示工具的X偏移
public static var toolTipsEx : Number = 15;
//提示工具的Y偏移
public static var toolTipsEy : Number = 20;
//提示工具的字体大小
public static var toolTipsTextFace : String = "Georgia";
public static var toolTipsTextSize : Number = 12;
 
//BarList按钮左侧方框边框颜色
public static var barListLeftBorderColor : uint = 0x777777;
//BarList按钮右侧线颜色
public static var barListRightLineColor : uint = 0x777777;
 
//列表的字体颜色大小
public static var listTextColor : uint = 0x777777;
public static var listTextFace : String = "Georgia";
public static var listTextSize : Number = 9;
//各个列表的间距
public static var listTextHSpace : Number = 6;
 
//默认的播放的音量（0到1）
public static var volume : Number = 0.2;
//音量按钮边框颜色
public static var volumeButtonBorderColor : uint = 0x777777;
//音量按钮颜色
public static var volumeButtonColor : uint = 0xFFFFFF;
 
//音量的高
public static var volumeBarH : Number = 60;
//音量的宽
public static var volumeBarW : Number = 8;
//音量的颜色
public static var volumeColor : uint = 0x555555;
 
//左右音量幅度按钮的背景颜色 由下到上
public static var barPeakBg1 : uint = 0xAAAAAA;
public static var barPeakBg2 : uint = 0x999999;
public static var barPeakBg3 : uint = 0x888888;
public static var barPeakBg4 : uint = 0x777777;
//左右音量幅度按钮的颜色 由下到上
public static var barPeak1 : uint = 0x00CC00;
public static var barPeak2 : uint = 0x33FF00;
public static var barPeak3 : uint = 0xFF9900;
public static var barPeak4 : uint = 0xFF0000;
//音量幅度的缓冲
public static var updateBarPeakNumber : Number = 0.8;
 
//MP3歌曲名的颜色和字体、大小
public static var titleTextColor : uint = 0x333333;
public static var titleTextFace : String = "Georgia";
public static var titleTextSize : Number = 10;
 
//lrc的颜色和字体、大小
public static var lrcTextColor : uint = 0x333333;
public static var lrcTextFace : String = "Georgia";
public static var lrcTextSize : Number = 10;
//每句和每句歌词间的间距
public static var lrcSpace : Number = 10;
 
//十字坐标的颜色
public static var crossColor : uint = 0xF2F2F2;
 
//圆环的背景色
public static var circleBgColor : uint = 0xEEEEEE;
//圆环背景的边线颜色
public static var circleBgBorderColor : uint = 0xEEEEEE;
 
//圆环加载色
public static var circleLoaderColor : uint = 0xCCCCCC;
//圆环加载的边线颜色
public static var circleLoaderBorderColor : uint = 0xCCCCCC;
 
//圆环播放色
public static var circlePlayColor : uint = 0x222222;
//圆环播放的边线颜色
public static var circlePlayBorderColor : uint = 0x222222;
//播放进度文字的颜色
public static var playTextColor : uint = 0x333333;
//播放进度文字的字体
public static var playTextFace : String = "Verdana";
//播放进度文字的大小
public static var playTextSize : Number = 18;
 
//停止及播放按钮的颜色
public static var playButtonColor : uint = 0x333333;
//停止及播放按钮的长宽（正方形）
public static var buttonWidth : Number = 16;
 
//更新波谱的时间(毫秒) 设置的FPS为50 即每20MS播放一帧 下面设置的updateWaveTime除以20得到的数字越大 缓冲的越好 
//不过同样updateWaveTime越大更新波谱的频率越低 
public static var updateWaveTime : Number = 50;
//波谱每次缓冲的值(小于1)
public static var updateWaveNumber : Number = 0.6;
//波谱每次比例缓冲的值(小于1)
public static var updateWaveScaleNumber : Number = 0.6;
 
//内部波谱相关
//波谱颜色
public static var waveInColor : uint = 0x0099ff;
//波谱边框颜色
public static var waveInBorderColor : uint = 0x0099ff;
//每个波形对应的角度(相当于宽 可以设置小数)
public static var waveInAng : Number = 1; 
//public static var waveInAng : Number = 0.5; 
//波形和波形之间的间距角度(不要设置为小数 最小为1)
public static var waveInSpaceAng : Number = 2; 
//波形长度的比率(相当于长) 可以改变此值来调整长度
public static var waveInScale : Number = 300; 
//内部波形是否反转
public static var waveInReversal : Boolean = false; 
 
//外部波谱相关 
//波谱未播放部分的颜色
public static var waveOutColor : uint = 0x339933;
//波谱未播放部分的边框颜色
public static var waveOutBorderColor : uint = 0x339933;
//每个波形对应的角度(相当于宽 可以设置小数)
public static var waveOutAng : Number = 3; 
//波形和波形之间的间距角度(不要设置为小数 最小为1)
public static var waveOutSpaceAng : Number = 2; 
//波形长度的比率(相当于长) 可以改变此值来调整长度
public static var waveOutScale : Number = 150; 
//播放部分的颜色
public static var waveOutColorOld : uint = 0x222222;
//播放部分的边框颜色
public static var waveOutBorderColorOld : uint = 0x222222;
 
//波形的比例限制 scale = (1 + (scale * 0.1));
public static var scaleMax : Number = 1.5;

具体配置方法：

播放器需要config.xml做整个播放的配置，配置文件地址可以通过传入比如config=http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/config2.xml，如果不传入config参数则默认从FLASH的同级目录下取config.xml做配置文件（例如上方的例子）。

下面是上方实例具体的配置文件内容：

< ?xml version="1.0" encoding="UTF-8"?>
<root>
	<music>
		<song path="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Blackbird.mp3" title="The Beatles - Blackbird." lrc="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Blackbird.lrc"/>
		<song path="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Heroin.mp3" title="The Velvet Underground - Heroin." lrc="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Heroin.lrc"/>
		<song path="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/tnt.mp3" title="AC/DC - T.N.T." lrc="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/tnt.lrc"/>
		<song path="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Bubblegoose.mp3" title="South Park - Bubblegoose." lrc="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Bubblegoose.lrc"/>
		<song path="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/OutsideTheWall.mp3" title="Pink Floyd - Outside The Wall." lrc="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/OutsideTheWall.lrc"/>
		<song path="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/LastNightGoodNight.mp3" title="初音ミク - Last Night,Good Night." lrc="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/LastNightGoodNight.lrc"/>
		<song path="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Starman.mp3" title="David Bowie - Starman." lrc="http://glll.googlecode.com/svn/trunk/for_my_website/19_waveCircle/Starman.lrc"/>
	</music>
	<theme>
		<autoplay>yes</autoplay>
		<volume>0.3</volume>
		<fps>true</fps>
	</theme>
</root>

music节点下的song是指播放的歌曲列表，path为歌曲地址，title为标题，lrc为歌词地址。

theme节点下即为播放器的个性化配置，可以通过传入与静态变量名相同的节点值来配置播放器的显示或运行效果，比如这里的<autoPlay>random</autoPlay>设置为开始随机播放。播放过程中如果当前曲目加载失败会自动加载下一首，播放完毕后也会循环播放下一首。

下面是一个“模拟”只绘制边线的例子：

测试前请先关闭其它播放器。

注意：由于FLASH的安全限制MP3和FLASH播放器如果不在同一域下波谱是无法显示的，所以播放器必须和MP3在同一域下才能显示出效果，大家如果不想把大容量的音乐文件放在自己的站上影响流量我这到有个办法，你可以申请一个GOOGLE SVN，将文件都放在GOOGLE SVN上即可（= = 当然这本是用来维护代码的，我只是给个减少流量的方法~），具体的申请方法我这里就不说了，自己找找吧。

关于绘制，内部波谱使用SoundMixer.computeSpectrum(byteArray, false, 0); 声音波形绘制。外部用SoundMixer.computeSpectrum(byteArray, true, 0); 频谱绘制。

对于看不到波谱效果，可能是你先打开了类似优酷等的视频播放器，或者其他的音乐FLASH播放器造成了冲突，可以先关闭类似的页面后再刷新此页测试。

下面这个是改变了大小、颜色、歌曲并取消自动播放，播放过的时间内部波形颜色反转的效果~

(全文 …)

{ 48 comments } { Tags: as3, player }

仿PSP的FLASH歌词同步波形播放器.

By19.Published on2008-07-6.

仿PSP的AS3同步歌词加载显示的FLASH波形播放器源文…

所谓的仿PSP的音乐播放器只是根据PSP上自带的那个波形当作背景这样，这是我偶尔在网络找到的一个很帮的波形效果（http://www.anttikupila.com/），便加在以前的播放器中（as3-lrc-mp3-wave）。点击屏幕切换波形，上面显示歌词，下面显示歌曲，去掉了音量控制和播放时间选择，感觉加上这些会很乱。

推荐另外一个一条可以置顶在页面上方的LRC LINE~：http://www.ll19.com/index.php/lrc-19line/

还是说一下正确加载XML，在站点加载FLASH的时候可以用”?playlist=xml地址(去掉后面的.xml)”来正确加载到XML。

比如我的播放器地址是：http://www.ll19.com/up/mp3/LL19.swf

我的XML地址是：http://www.ll19.com/glll/xml/mp3/playList.xml

那我把播放器在放到页面上的时候就写成：

http://www.ll19.com/up/mp3/LL19.swf?playlist=http://www.ll19.com/glll/xml/mp3/playList

说明：

1.最好直接把LRC的扩展名改成XML。

2.中文歌词存成UTF8格式。

3.播放器上鼠标右键也可以控制音乐的播放，比如前一首、后一首、停止等（改变波谱暂时未实现）。

4.右下是一些控制按钮，分别是关开音乐这些，右上的箭头可以拖拉音乐列表来选择。

5.XML配置 auto=”"：random FLASH加载后便随机播放，yes FLASH加载后播放第一首歌曲，其余字符均为不直接播放。

mp3节点中：path=”http://www.ll19.com/up/…/kida.mp3″ MP3的地址。
title=”kidA.” mp3的标题。lrc=”http://www.ll19.com/up/GLLL-Lrc-Wave/lrc/kida.xml” LRC的地址。 type=”en” LRC的类型，因为英文我喜欢小字体，换了中文的话歌词字体会过小。所以这里要注明类型来改变字体，全是英文就写en，中文歌词写cn。font=”" 可以来写简单的HTML来控制歌词的字体颜色等，比如这里可以写 size=’10′ color=’#FF0000′ face=’Arial’ 既font中间的部分，不想控制就空着。

(全文 …)

{ 39 comments } { Tags: as3, flash, lrc, mp3, player }

19~Blog | 今天总是好过昨天~

Recent Comments

Search the Site

Archives

360° FLASH MP3播放器-19~waveCircle

对于看不到波谱效果，可能是你先打开了类似优酷等的视频播放器，或者其他的音乐FLASH播放器造成了冲突，可以先关闭类似的页面后再刷新此页测试。

仿PSP的FLASH歌词同步波形播放器.

仿PSP的AS3同步歌词加载显示的FLASH波形播放器源文…