• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

(校内网播放器代码)博客内嵌flash音乐播放器 demo实现

JavaScript web前端中文站 2年前 (2017-10-18) 700次浏览 已收录 0个评论

随着版权的越来越重要,网站上想要播放一些 mp3 的音乐,必须要使用外链。而现在大多数网站音乐都不提供下载了,那么该如何在自己的博客上添加音乐播放器呢?本文教你实现一款校内网播放器代码。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

目前,绝大多数的音乐播放器都是 flash 实现的,例如百度 MP3,新浪乐库等。在 HTML5 未来临的时候,flash 技术是最上佳的选择。本文将讲解一些 flash 音乐播放器相关的内容,不过不是讲怎么开发制作,而是如何在自己的站点上使用国内大型网站的 flash 音乐播放器,而且本文所涉及的音乐播放器是专指单音乐播放器,顾名思意就是一次只能播放一首歌的播放器,常用在博客日志系统中。本文讲展示三款单音乐播放器,分别来自新浪网,人人网还有开心网。

新浪博客的音乐播放器

我们先来看看新浪博客的这个音乐播放器,这个播放器可以说是这三个播放器中功能最简单,技术含量最低,ui 最差的一个播放器了,虽说新浪博客很牛叉,但是这个音乐播放器我打不及格。其没有循环播放以及自动播放(源代码已经写死了自动播放)的控制,没有直接调节进度的功能,静音的 ui 没有仔细设计,在切换时可以看到一点点的错位。更加无法容忍的是,就算功能如此简单,还是有 bug——静音后,当歌曲第二次播放时又有声音了,静音失效。此播放器在 IE 下经常无法播放歌曲,至少在我的机子上是这样的。

此播放器地址如下:http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf。

相关的代码如下:

 <embed width="238" height="24" name="FlashVars" wmode="opaque" 
 play="true" loop="false" scale="showall" 
 src="http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf" 
 FlashVars="url=http://api.ning.com/files/1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7
 e63gp4_/200912202458577.mp3" type="application/x-shockwave-flash">
 </embed>

注意到代码部分的 FlashVars 没,这个是用来给 flash 传参的,一种与 flash 的交互手段,传递的参数就是要播放的音乐的地址,所以如果您想更换歌曲只要将此 mp3 歌曲地址换掉就可以了。例如我们想要用此播放器放一首张靓颖的《我相信》,只要将 mp3 地址替换为 http://mp3.m.mop.com/mp3/new_mp3/2009/12/22/ae874d7db9ad496c976252db66902723.mp3 就可以了。结果就是:

 <embed width="238" height="24" name="FlashVars" wmode="opaque" 
 play="true" loop="false" scale="showall"  
 src="http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf"  
 FlashVars="url=http://mp3.m.mop.com/mp3/new_mp3/2009/12/22/
 ae874d7db9ad496c976252db66902723.mp3"  
 type="application/x-shockwave-flash">
 </embed>

人人网日志音乐播放器

人人网的音乐播放器从界面上看就比较专业,质感很细腻,适当的圆角。功能上来讲,也不赖,可以控制是否自动播放,可以直接调播放的进度。没有遇到浏览器不能播放的情况。

此播放器在人人网上的地址是:http://s.xnimg.cn//swf/player.swf,您可以下载到本地直接使用。

例如本例子完整代码如下:

 <embed width="360" height="30" 
 pluginspage="http://www.macromedia.com/go/getflashplayer"  
 type="application/x-shockwave-flash" 
 allowfullscreen="false" allowscriptaccess="sameDomain"  
 bgcolor="#ffffff" scale="noscale" quality="high" menu="false" loop="false" 
 wmode="transparent"  
 src="http://s.xnimg.cn//swf/player.swf?url=http://api.ning.com/files/
 1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3&Autoplay=0" />

上面代码部分的 MP3 地址参数直接写在的播放器地址的后面,您也可以使用 FlashVars 属性设置,效果一样的。其中的参数有两个一个是 MP3 地址 – “url=”,另外一个参数是”Autoplay”,用以表示是否自动播放,0 表示不自动播放,1 表示自动播放。

开心网日志音乐播放器

开心网与人人可以说是竞争对手,因为网站性质,目标群体有很多的一致之处,就连播放器也差不多这种差不多不是在界面上,而是在功能上。例如开心网的这个播放器也是可以控制是否自动播放,可以调节音乐的进度,连参数也差不多一致。您可以点击下面的播放按钮体验一下。

此播放器地址如下:http://img.kaixin001.com.cn/swf/diary/mp3player-3.swf,您可以下载到本地直接使用。

例如本例子代码如下:

 <embed width="365" height="50" align="middle"  
 flashvars="url=http://api.ning.com/files/
 1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3&autoplay=0"  
 src="http://img.kaixin001.com.cn/swf/diary/mp3player-3.swf" 
 wmode="transparent" loop="false" menu="false"  quality="high" 
 scale="noscale" salign="lt" bgcolor="#ffffff" allowscriptaccess="sameDomain" 
 allowfullscreen="false"  type="application/x-shockwave-flash" 
 pluginspage="http://www.macromedia.com/go/getflashplayer" />

外部参数有两个,与上面的人人网的一致,一个是 MP3 地址,另外一个是是否自动播放。前者参数名为 url,后面直接跟 MP3 路径就好,后者参数名为 autoplay,后面值为 1 表示自动播放,0 表示不是自动播放。例如:flashvars=”url=http://zhangxinxu.com/m…c/爱情.mp3&autoplay=1″就表示自动播放一个名为”爱情”的 MP3 文件。

本文介绍的一些音乐播放器都是正规公司独立开发的东西,均含有版权,如果您想使用切勿用于商业用途,务必注明原出处。本文旨在介绍这几个播发器,仅用于学习与交流,一些版权的问题本人概不负责。特此声明。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:(校内网播放器代码)博客内嵌 flash 音乐播放器 demo 实现
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址