打造你完美的音乐播放器 - Flash收音机,聆听电台之声
作者:Rogiture 日期:2007-07-21
打造你完美的音乐播放器 - 从搜索引擎获取MP3地址
打造你完美的音乐播放器 - 从搜索引擎获取LRC歌词
打造你完美的音乐播放器 - LRC歌词与音乐同步播放
打造你完美的音乐播放器 - Flash收音机,聆听电台之声
打造你完美的音乐播放器 - 从搜索引擎获取LRC歌词
打造你完美的音乐播放器 - LRC歌词与音乐同步播放
打造你完美的音乐播放器 - Flash收音机,聆听电台之声
原文出处:http://www.rogiture.com/blog/article.asp?id=4(转载请注明作者及出处)
作者:Rogiture
要点:
大多数网络电台都是mms流播放的,所以,在flash中无法直接loadSound。
mms流可以在html页面中插入Media Player控件进行播放。
flash与JavaScript可以"畅所欲言"的通信。
JavaScript可以很好的操作Media Player控件。
新建个名为fm.xml的文档,用于记录电台信息。
以下是我搜集的电台信息。(你可以在http://www.chinaradiotv.com/或者搜索引擎中,找到更多的电台地址)
程序代码
<?xml version="1.0" encoding="utf-8"?>
<List>
<!--属性Name用于记录电台名称,Path为电台地址-->
<Fm Name="星沙之声" Path="mms://media.csonline.com.cn/fm105"/>
<Fm Name="湖北交通频道" Path="mms://219.140.196.38/live_JiaoTong"/>
<Fm Name="星岛中文台" Path="mms://64.71.150.27/canradio"/>
<Fm Name="QQ之声:欢乐派对" Path="http://qr.fm.qq.com/qqradio?qqradio"/>
<Fm Name="QQ之声:音乐休闲" Path="http://qr.fm.qq.com/music?qqradio"/>
<Fm Name="QQ之声:秀radio" Path="http://qr.fm.qq.com/daren?qqradio"/>
<Fm Name="QQ之声:我的音乐" Path="http://qr.fm.qq.com/mymusic?qqradio"/>
<Fm Name="QQ之声:幽默相声" Path="http://qr.fm.qq.com/humor?qqradio"/>
</List>
<List>
<!--属性Name用于记录电台名称,Path为电台地址-->
<Fm Name="星沙之声" Path="mms://media.csonline.com.cn/fm105"/>
<Fm Name="湖北交通频道" Path="mms://219.140.196.38/live_JiaoTong"/>
<Fm Name="星岛中文台" Path="mms://64.71.150.27/canradio"/>
<Fm Name="QQ之声:欢乐派对" Path="http://qr.fm.qq.com/qqradio?qqradio"/>
<Fm Name="QQ之声:音乐休闲" Path="http://qr.fm.qq.com/music?qqradio"/>
<Fm Name="QQ之声:秀radio" Path="http://qr.fm.qq.com/daren?qqradio"/>
<Fm Name="QQ之声:我的音乐" Path="http://qr.fm.qq.com/mymusic?qqradio"/>
<Fm Name="QQ之声:幽默相声" Path="http://qr.fm.qq.com/humor?qqradio"/>
</List>
接着,在flash中读取并解析fm.xml。
然后将电台名称显示出来,当点击电台名称时,播放相应的电台。
新建个名为fm_player.fla的flash文档,
选择主场景第一帧,打开动作面板,输入如下代码:
程序代码
//导入包
import flash.external.*;
//创建a标签样式
var cssText:String = "a:link{color:#111111} a:hover{color:#999999} a:active{color:#555555}";
var myStyleSheet = new TextField.StyleSheet();
myStyleSheet.parseCSS(cssText);
/*
//=== 加载电台列表xml ===
//声明xml对象
var fm_xml:XML = new XML();
//设置fm_xml在分析过程中将放弃仅包含空白的文本节点
fm_xml.ignoreWhite = true;
//定义xml对象加载完成事件
fm_xml.onLoad = function(success:Boolean):Void {
//如果加载xml成功
if (success) {
//获取电台总数
var sum:Number = this.firstChild.childNodes.length;
//循环提取电台地址及名称,显示所有电台
for (var i:Number = 0; i<sum; i++) {
//创建动态文本,用于显示电台名称
var txt:TextField = _root.createTextField(i+"_txt", _root.getNextHighestDepth(), 0, i*20+100, Stage.width, 20);
//文本支持html标签
txt.html = true;
//文本居中对齐
txt.autoSize = "center";
//文本使用myStyleSheet样式
txt.styleSheet = myStyleSheet;
//提取电台名称
var fmName:String = this.firstChild.childNodes[i].attributes.Name;
//提取电台地址
var fmPath:String = this.firstChild.childNodes[i].attributes.Path;
//显示电台名称,当点击电台名称时,调用playFM函数,播放所选电台
txt.htmlText = "<a href='asfunction:playFM,"+fmPath+"'>"+fmName+"</a>";
}
//删除xml对象
delete fm_xml;
}
};
//加载电台列表xml
fm_xml.load("fm.xml");
/*
//播放所选电
function playFM(fmPath:String):Void {
//调用JavaScript中的playFM函数,并将电台地址传过去,播放所选电台
ExternalInterface.call("playFM", fmPath);
}
import flash.external.*;
//创建a标签样式
var cssText:String = "a:link{color:#111111} a:hover{color:#999999} a:active{color:#555555}";
var myStyleSheet = new TextField.StyleSheet();
myStyleSheet.parseCSS(cssText);
/*
*/
//=== 加载电台列表xml ===
//声明xml对象
var fm_xml:XML = new XML();
//设置fm_xml在分析过程中将放弃仅包含空白的文本节点
fm_xml.ignoreWhite = true;
//定义xml对象加载完成事件
fm_xml.onLoad = function(success:Boolean):Void {
//如果加载xml成功
if (success) {
//获取电台总数
var sum:Number = this.firstChild.childNodes.length;
//循环提取电台地址及名称,显示所有电台
for (var i:Number = 0; i<sum; i++) {
//创建动态文本,用于显示电台名称
var txt:TextField = _root.createTextField(i+"_txt", _root.getNextHighestDepth(), 0, i*20+100, Stage.width, 20);
//文本支持html标签
txt.html = true;
//文本居中对齐
txt.autoSize = "center";
//文本使用myStyleSheet样式
txt.styleSheet = myStyleSheet;
//提取电台名称
var fmName:String = this.firstChild.childNodes[i].attributes.Name;
//提取电台地址
var fmPath:String = this.firstChild.childNodes[i].attributes.Path;
//显示电台名称,当点击电台名称时,调用playFM函数,播放所选电台
txt.htmlText = "<a href='asfunction:playFM,"+fmPath+"'>"+fmName+"</a>";
}
//删除xml对象
delete fm_xml;
}
};
//加载电台列表xml
fm_xml.load("fm.xml");
/*
*/
//播放所选电
function playFM(fmPath:String):Void {
//调用JavaScript中的playFM函数,并将电台地址传过去,播放所选电台
ExternalInterface.call("playFM", fmPath);
}
按F12发布你的flash
找到你的fm_player.html,在页面<head></head>标签中插入javaScript函数playFM()。
程序代码
<script language="javascript" type="text/javascript">
/*
让id为media的Media Player控件播放在flash中所选电台,函数接收flash传来的电台地址
*/
function playFM(s) {
media.URL = s;
media.controls.play();
}
</script>
/*
让id为media的Media Player控件播放在flash中所选电台,函数接收flash传来的电台地址
*/
function playFM(s) {
media.URL = s;
media.controls.play();
}
</script>
在页面<body></body>中插入一个id为media的Media Player控件,用于播放mms流,放入不可见的层中。
程序代码
<div style="display:none">
<OBJECT
id=media
codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading
type=application/x-oleobject height=0 width=0
classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 components... Player Media?
Windows Microsoft?>
</OBJECT>
</div>
<OBJECT
id=media
codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading
type=application/x-oleobject height=0 width=0
classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 components... Player Media?
Windows Microsoft?>
</OBJECT>
</div>
因flash player安全机制的原因,必须在web中浏览fm_player.html。
你可以在rogiture.com进行 预览 与下载源文件。
本来还想写篇怎么制作将前几篇所说的功能全整合在一块的播放器,看来是没必要了 ^_^。
搜了一下,制作音乐播放器的教程是在太多了。