实现单页播放音乐的功能

需求描述：网页播放MP3，点击某一个音乐，弹出播放窗口，再次点击另一个音乐则播放在刚才的弹出窗口中播放新选择的音乐，播放的弹出窗口只能有一个。

本博主最近正在建设一个9元包邮的网站，希望各位光临指导一些意见： 9元包邮 http://www.jiubaou.com/

问题一： 我们都知道使用window.open()函数可以弹出一个窗口，但是如果你多次点击，则会弹出多个。

问题二：我们如何在当前页面点击音乐时，通知窗口我们换了一个音乐了。

本博主最近正在建设一个9元包邮的网站，希望各位光临指导一些意见： 9元包邮 http://www.jiubaou.com/

解决方案：

1. 点击播放音乐时，判断COOKICE['is_open']的值是否为0，如果为0表示窗口还未弹出，则弹出播放窗口，传递要播放的音乐ID。如果为1表示播放窗口已经打开，我们将需要播放的新的音乐ID放到COOKICE['playid']中。
2. 在弹出的窗口中，将COOKICE['is_open']的值设置为1，表示播放页面已经被打开过。

3. 在弹出的窗口中，每500毫秒，执行一次读取COOKICE['playid']的动作，判断是否触发音乐播放的事件。如果时，则获取新的音乐ID进行播放。

4.当播放的页面被关闭时，我们需要将COOKICE['is_open']的值清空。如果不清空，则你下次就打不开播放页面了。

关键代码：

paly.js  可以被所有点击播放音乐的页面包含

/** 
 * 点击播放音乐
 * @author CaiYJ([email protected])
 * @param id 要播放的音乐ID

 */

function mp3add(id)

{

　　       //判断播放器窗口是否已经被打开 
　　       var is_open = GetCookie("is_open");

	if (is_open  == 1)

	{

		//如果已经打开，则将playid写到cookie中
                  var now = new Date();

		var ss = now.getTime();

		now.setTime(ss + 12 * 60 * 60 * 1000);// 12 hours

		document.cookie = "playid=" + (id) + ";expires=" + now.toGMTString();

	}

	else

	{

		 //如果没有打开，则打开播放器页面
                   window.open("Play_index_id_" + id + ".html",'','height=500,width=335,top=200,left=200,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');

	}

}



function GetCookie(name) {

	var arr = document.cookie

			.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));

	if (arr != null) {

		return unescape(arr[2]);

	}

	return null;

}

 play.html页的关键代码

document.domain = "xxxxx.net"; //您的域名

document.cookie = "is_open=1"; //设定播放器已经打开
//当页面关闭时，清空is_open，要不然再次点击播放音乐时，就无法打开播放页面了。

window.onbeforeunload = function(){document.cookie = "is_open=0";}

//每500毫秒定时执行的任务
var check_event = function ()

{

	//判断playid是否被改变，如果改变则播放新的音乐
         var playid = GetCookie('playid');

	if(playid != null && playid != "")

	{

		document.cookie = "playid=";

		//根据音乐ID播放音乐，具体代码自己实现
　　                 play(playid);	
         }

}



window.setInterval(check_event,500);



function GetCookie(name) {

	var arr = document.cookie

			.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));

	if (arr != null) {

		return unescape(arr[2]);

	}

	return null;

}