播放器外部调用QQ音乐官方链接

作者:zqcheng    发布于6年前 (2013-03-17)    阅读:  287  次


首先贴出CSS代码(图片自己按地址下载):

.play,.pause { font-size:12px; color:#bbb; display:block; line-height:28px; width:229px; height:28px;background:url(http://aoh.cc/music/images/musicbt.png) no-repeat; padding-left:40px;}

.play {background-position:195px 0;}

.pause {background-position:195px -28px;}

.play:hover,.pause:hover{ background-color:#201f1f;color:#fff; text-decoration:none}.player {font:12px/1.5 tahoma,5b8b4f53,sans-serif !important;width:269px;height:32px; background:url(http://aoh.cc/music/images/music2.jpg) no-repeat; padding:0; position:relative; z-index:2}

.player ol,ul{list-style:none;margin:0 !important;}

.player h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%}

.player a {text-decoration:none;overflow:hidden;}

.player a:hover {text-decoration:none}

.playt{ height:36px; text-indent:-999px; overflow:hidden}

.player h3 {height:32px; line-height:32px; width:269px; cursor:pointer;padding:0 !important;margin:0 !important;}

#song_title {width:155px; float:left; display:block; color:#d9d6d6; font-size:12px; padding-left:40px}

.t_play,.t_pause {display:block; width:25px; height:22px; text-indent:-9999px; overflow:hidden; float:left; margin-top:5px; background:url(http://aoh.cc/music/images/musicbt.png) no-repeat 0 -3px;}

.t_pause { background-position:0 -31px}

.song { position:absolute;width:269px; background:#201f1f;filter:Alpha(opacity=90);opacity:0.90;}

.song li{ line-height:28px; border-bottom:1px solid #181818;padding:0 !important;margin:0 !important;background:none !important;}

其次是播放器代码:

<div class="player">

<h3 id="song_top"><span id="song_title">梦千年之恋 - 金莎</span><a href="javascript:playmusic('1')" id="play_btn" class="t_play">播放</a></h3>

<ul class="song" id="song" style="display:none">

<li><a href="javascript:void(0);" onclick="playmusic('1');" id="playbtn_1" class="play">梦千年之恋 - 金莎</a></li>

<li><a href="javascript:void(0);" onclick="playmusic('2');" id="playbtn_2" class="play">爱一点 - 莫艳玲</a></li>

<li><a href="javascript:void(0);" onclick="playmusic('3');" id="playbtn_3" class="play">红玫瑰 - 陈奕迅</a></li>

<li><a href="javascript:void(0);" onclick="playmusic('4');" id="playbtn_4" class="play">青花瓷 - 周杰伦</a></li>

</ul>

</div>

<script src="http://imgcache.qq.com/music/miniplayer/music_player.js" charset="gb2312"></script>

<script type="text/javascript">

//音乐播放

//playmusic(1)

document.getElementById("song_top").onclick=function(){

if(document.getElementById("song").style.display=="none"){document.getElementById("song").style.display="block";}

else{document.getElementById("song").style.display="none";}

}

document.getElementById("song_top").onmouseout=document.getElementById("song").onmouseout=function(){document.getElementById("song").style.display="none";}

document.getElementById("song").onmouseover=function(){document.getElementById("song").style.display="block";}

function playmusic(id) {

var songList=document.getElementById("song").getElementsByTagName("a")

document.getElementById("song_title").innerHTML=songList[id-1].innerHTML;

document.getElementById("play_btn").href="javascript:playmusic('"+id+"')";

document.getElementById("song").style.display="none";

if (document.getElementById('playbtn_'+id).className == 'pause'){

document.getElementById('playbtn_'+id).className = 'play';

document.getElementById("play_btn").className="t_play";

try {pausePlayer();

} catch (e) {}

}else{

for (i=1; i<=4; i++) {

//先暂停其它

if (document.getElementById('playbtn_'+i).className == 'pause'){

document.getElementById('playbtn_'+i).className = 'play';

document.getElementById("play_btn").className="t_play";

}

}

//播放

document.getElementById('playbtn_'+id).className = 'pause';

document.getElementById("play_btn").className="t_pause";

if (id == '1') {

try {Qstop();playSong('梦千年之恋','http://stream17.qqmusic.qq.com/32636420.mp3',32636420);

} catch (e) {}

}

if (id == '2') {

try {Qstop();playSong('爱一点','http://stream8.qqmusic.qq.com/12443993.wma',12443993);

} catch (e) {}

}

if (id == '3') {

try {Qstop();playSong('红玫瑰','http://stream8.qqmusic.qq.com/13259155.wma',13259155);

} catch (e) {}

}

if (id == '4') {

try {Qstop();playSong('青花瓷','http://stream18.qqmusic.qq.com/30410316.mp3',30410316);

} catch (e) {}

}

//alert('播放:NO' + id);

}

}

</script>

说下怎么调用,可能比较复杂了,= = 好吧,的确是复杂了:

<ul class="song" id="song" style="display:none">

<li><a href="javascript:void(0);" onclick="playmusic('1');" id="playbtn_1" class="play">梦千年之恋 - 金莎</a></li>

<li><a href="javascript:void(0);" onclick="playmusic('2');" id="playbtn_2" class="play">爱一点 - 莫艳玲</a></li>

<li><a href="javascript:void(0);" onclick="playmusic('3');" id="playbtn_3" class="play">红玫瑰 - 陈奕迅</a></li>

<li><a href="javascript:void(0);" onclick="playmusic('4');" id="playbtn_4" class="play">青花瓷 - 周杰伦</a></li>

</ul>

这里是播放列表部分,很简单,注意下onclick中的顺序就可以了。

for (i=1; i<=4; i++) {

//先暂停其它

if (document.getElementById('playbtn_'+i).className == 'pause'){

document.getElementById('playbtn_'+i).className = 'play';

document.getElementById("play_btn").className="t_play";

}

}

//播放

document.getElementById('playbtn_'+id).className = 'pause';

document.getElementById("play_btn").className="t_pause";

if (id == '1') {

try {Qstop();playSong('梦千年之恋','http://stream17.qqmusic.qq.com/32636420.mp3',32636420);

} catch (e) {}

}

if (id == '2') {

try {Qstop();playSong('爱一点','http://stream8.qqmusic.qq.com/12443993.wma',12443993);

} catch (e) {}

}

if (id == '3') {

try {Qstop();playSong('红玫瑰','http://stream8.qqmusic.qq.com/13259155.wma',13259155);

} catch (e) {}

}

if (id == '4') {

try {Qstop();playSong('青花瓷','http://stream18.qqmusic.qq.com/30410316.mp3',30410316);

} catch (e) {}

}

接着就是调用地址了,大家应该都知道,腾讯QQ音乐的正版音乐是有防盗链限制的,你直接调用他的MP3文件地址的话是无法播放的。

这里呢首先注意下“for (i=1; i<=4; i++) ”这里第一句,i<=4就是你列表中有几首歌,我这里示例了4首,那就是i<=4,如果是8首那就是i<=8,下面if (id == '1')第一首,如果自己要加的话按顺序排下去。

重点说下playSong部分,playSong('红玫瑰','http://stream8.qqmusic.qq.com/13259155.wma',13259155);格式就是playSong('歌曲名称','QQ音乐地址',QUSID);

QQ音乐地址可以在soso音乐中得到,打开SOSO音乐搜索你要添加的歌曲,在以前还可以提供下载的时候直接点下载按钮即可得到,现在不行了,在搜索列表里右键单击查看网页源码,可以看到如下代码:

<td class="data">322392668@@红玫瑰@@The 1st Eleven Years@@陈奕迅@@3873455@@mp3@@100@@241@@FIhttp://stream8.qqmusic.qq.com/13259155.wma;;|||@@1114041511@@143359772@@1</td>

其中就有QQ音乐地址了,QUSID就是13259155.wma的文件名。

添加新评论