在线播放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('');


//搭建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