`
确实比较男
  • 浏览: 115267 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

在线播放mp3的音乐播放器 显示专辑图片 歌词 动画效果也不错

阅读更多

这个是自己在毕业的时候,在做毕业设计的时候写的,为了完成毕业设计的一个在线播放mp3的功能,这个播放器也不算是完全算是自己写的,在以前学习flash的时候在网上看到了一个很不错的播放器,但是那是一个桌面的一个应用,没办法在网页上使用,所以就决定反编译那个软件,取出来里面的一些图片,动画元素,但是反编译出来的代码也有一写问题,然后就开始修改里面的代码,去掉了里面一些功能,在播放器中也留有javascript调用的接口。

使用方式也很简单:

1. 在附件里面我会上传这个播放器的源代码,还有这个播放器使用的一个简单示例,看下来。

2. javascript代码如下:

 

		  
var data = '{'+
			'"musicId":' + '"3",' +
			'"songName":'+'"Can\'t Stop Love",'+
			'"singer":'+'"Darin",'+
			'"url":'+'"1.mp3"'+
		'}|{'+
			'"musicId":' + '"4",' +
			'"songName":'+'"想你的夜",'+
			'"singer":'+'"Darin",'+
			'"url":'+'"2.mp3"'+
		'}';

document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="380" id="webMusicPlayer" align="middle">');
		document.write('<param name="movie" value="webMusicPlayer.swf" />');
		document.write('<param name="quality" value="high" />');
		document.write('<param name="bgcolor" value="#ffffff" />');
		document.write('<param name="play" value="true" />');
		document.write('<param name="loop" value="true" />');
		//flash舞台背景设置为透明
		document.write('<param name="wmode" value="transparent" />');
		document.write('<param name="scale" value="showall" />');
		document.write('<param name="menu" value="true" />');
		document.write('<param name="devicefont" value="true" />');
		document.write('<param name="salign" value="" />');
		document.write('<param name="allowScriptAccess" value="sameDomain" />');
		document.write('<embed src="webMusicPlayer.swf" width="520" height="380" id="webMusicPlayer" '+
				'name="webMusicPlayer" wmode="transparent" allowScriptAccess="sameDomain" '+
				'quality="high" bgcolor="#ffffff" play="true" loop="true" scale="showall" menu="true" devicefont="true"'+
				'type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');


//搭建js与flash交互的环境
function thisMovie(movieName) {
	if (navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName];
	} else {
		return document[movieName];
	}
}

/**
 * 向播放列表中添加歌曲
 * @param data
 */
function addMusicToPlayList(data) {
	thisMovie("webMusicPlayer").addMusicToPlayList(data);
}

/**
 * 向播放列表中添加并且播放
 * @param data
 */
function addMusicAndPlay(data){
	thisMovie("webMusicPlayer").addMusicAndPlay(data);
}

/**
 * 删一首歌曲
 * @param musicId
 */
function deleteMusic(musicId){
	alert(musicId);
}
/**
 * 清空播放列表
 */
function clearPlayList(){
	alert("clear");
}

3. 在从js向flash发送歌曲的数据的时候一定要采用json格式的字符串,就像示例代码一样。

 

4. 在向flash中传入的歌曲信息应该有4个内容:歌曲的id, 歌曲的名称,歌手名称,还有就是歌曲的url,特别注意的是歌曲的url不能出现中字符,具体为什么我也不太清楚,我测试使用到中文字符的歌曲都播放不出来。

5. 在js代码中的addMusicToPlayList 和 addMusicAndPlay这两个方法是js向播放器传入数据,删除歌曲和清空播放列表是播放器删除了歌曲或者清空了播放列表后向js发出通知,这样就可以让后台可以出来这两个动作

6.使用附件中的使用很简单,直接把示例拷贝到Tomcat或者其他服务器中,然后访问webMusicPlayer.html这个文件就可以看到效果了,效果如下:

 

 

7. 附近下载地址:https://github.com/silentwu/MusicPlayer

 

分享到:
评论

相关推荐

    用C#和directx实现的音乐播放器(带歌词同步功能)

    3. **界面展示**:将同步好的歌词显示在界面上,可以使用C#的UI控件,如TextBox或RichTextBox,结合动画效果让歌词滚动或淡入淡出。 4. **实时更新**:当音乐播放位置改变时,需要立即更新歌词显示,确保歌词与音乐...

    c#音乐播放器,像千千静听界面靓丽,能同时播放图片

    在描述中,我们可以进一步了解到这款音乐播放器不仅具有美观的界面,还能够播放各种格式的图片文件,同时支持上传歌曲和动态显示歌词,具备了全面的音乐播放功能。 首先,让我们深入了解一下C#这一编程语言。C#是由...

    C_Me音乐播放器应用源码完整版.zip

    C_Me音乐播放器是一款音乐播放器应用,该应用已经上线了国内各大应用市场网站,大家可以去安卓测试一下,应用实现了可以播放mp3、wma,还可以显示歌词,可以浏览本地所有音乐文件,可以将音乐分专辑分类,播放器界面...

    mp3手机音乐播放器代码大全.zip

    5. 整体架构:一个完整的手机音乐播放器通常包含以下几个部分:音频播放控制(播放、暂停、上一曲、下一曲、进度条)、音量控制、歌曲列表展示、播放模式选择(顺序、随机、单曲循环)以及可能的歌词同步显示。...

    C_Me音乐(播放器)

    同时,它还能从歌曲文件内提取专辑图片并进行展示,增添听歌时的视觉乐趣,配以精心设计的动画效果,整体体验更加生动有趣。 1. **基础音乐播放功能**: - **播放与暂停**:C_Me音乐播放器提供了基础的播放和暂停...

    android仿酷狗音乐播放器

    1. Material Design:酷狗音乐播放器的界面设计通常遵循谷歌的Material Design指南,提供美观且易用的布局和动画效果。 2. 自定义控件:为了实现酷狗特有的UI元素,可能需要自定义控件,如音乐播放进度条、歌曲列表...

    C#音乐播放器

    【C#音乐播放器】项目是一个使用C#编程语言开发的简单音乐播放软件。这个项目的目的是实现基础的音频播放功能,以及提供换肤和显示歌词等附加特性。在这个项目中,我们将探讨C#编程语言在多媒体应用开发中的应用,...

    MP3音乐播放器工具代码

    MP3音乐播放器工具代码是利用现代Web技术HTML5和CSS3实现的一款创新性的音乐播放器应用。在本文中,我们将深入探讨这个项目的核心技术、功能实现以及它们在实际开发中的应用。 首先,HTML5是现代网页开发的基础,它...

    简单网页音乐播放器.zip

    这个播放器具备播放时间显示、滚动歌词同步以及专辑背景切换等功能,这些都是现代网页音乐播放器的常见特性。 首先,我们要理解**播放时间显示**是如何工作的。在网页上,这通常通过JavaScript来实现。JavaScript...

    HTML5音乐播放器带歌词

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果。通过jQuery,我们可以更高效地编写交互代码。 3. **歌词同步显示**:实现歌词同步显示通常需要JavaScript配合JSON或其他数据格式来存储歌词...

    音乐播放器

    音乐播放器是一款应用程序,主要功能是播放音频文件,如歌曲,并可能包含一些附加特性,如开机动画和开机歌曲设置。这款音乐播放器基于C++编程语言,利用Qt5框架进行开发,Qt5是一个功能强大的跨平台应用开发框架,...

    jQuery可缩放随身听音乐播放器代码

    在网页设计中,音乐播放器是常见的一种交互元素,用于提供用户在线听歌的体验。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的API和便捷的DOM操作,使得创建功能丰富的音乐播放器变得简单。本篇文章将详细...

    玩乐族音乐播放器项目.zip

    7. **权限管理**:Android系统有严格的权限控制,音乐播放器可能需要读取外部存储(用于访问音乐文件)或悬浮窗权限(显示歌词)等,理解如何在AndroidManifest.xml中配置和请求权限是必要的。 8. **异步处理和线程...

    Android MP3播放器,带卡拉OK字幕.zip

    2. **同步显示**:根据当前播放时间,找到对应的歌词并显示在屏幕上,这可能涉及到时间戳的比较和动画效果的实现。 3. **用户交互**:允许用户调整歌词显示的速度、大小、颜色等,以满足不同需求。 4. **多媒体框架*...

    jQuery虾米音乐播放器样式代码

    - **专辑封面**:展示当前播放歌曲的专辑图片,增加视觉效果。 - **推荐系统**:根据用户的播放历史或喜好,推荐相似的音乐。 - **播放历史记录**:保存用户的播放记录,便于回溯。 开发这样一个音乐播放器,除了...

    扁平html5音乐播放器代码

    6. **Plugins**:可能包含一些特定的插件或库,用于增强音乐播放器的功能,如波形显示、歌词同步滚动等。这些插件可能使用JavaScript编写,与主播放器代码集成。 7. **css**:这个目录包含了CSS样式文件,可能有多...

    C_Me音乐播放器应用源码完整版

    C_Me音乐播放器是一款音乐播放器应用,该应用已经上线了国内各大应用市场网站,大家可以去安卓测试一下,应用实现了可以播放mp3、wma,还可以显示歌词,可以浏览本地所有音乐文件,可以将音乐分专辑分类,播放器界面...

    music-10-krc.zip

    确保所用的音乐播放器支持KRC格式,或者可以配合专门的KRC歌词显示软件来获得最佳效果。 5. **兼容性问题**:在不同操作系统(Windows、Mac、Linux)和设备(电脑、手机、平板)上,播放KRC歌词可能需要特定的软件...

    网易云-APlayer.rar

    【标题】:“网易云-APlayer.rar”是一个包含网易云音乐播放器插件示例的压缩文件,用于在博客或其他网页中集成音乐播放功能。 【描述】:这个压缩包提供了网易云官方开发的APlayer插件的演示版本。APlayer是一款...

    jQuery响应式网页音乐播放插件

    在音乐播放插件中,js特效可能包括播放/暂停按钮的动画效果、音量滑块的拖动交互、进度条的实时更新以及歌词同步显示等功能。JavaScript允许开发者监听用户的操作,如点击事件,然后触发相应的功能,提供更加生动和...

Global site tag (gtag.js) - Google Analytics