一、第一种样式
这种你想添加多少音乐就添加多少音乐!
将下方代码复制到博客侧边栏!
话不多说!
上代码!
var ap = new APlayer({
element: document.getElementById('player'),
narrow: false,
autoplay: false,
showlrc: true,
fixed:1,
theme: '#F5F5F5',
music: [{
title: '醉玲珑',
author: '李瑨瑶',
url: 'http://m10.music.126.net/20201219204654/0c4abec28edf0cd281411d6905d2fb0f/ymusic/ca71/3284/f58b/98a3c448f2dca3127f01b90f903c3783.mp3',
pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
},
{
title: '那些花儿',
author: '朴树',
url: 'http://music.163.com/song/media/outer/url?id=28996922.mp3',
lrc:"[00:00.000] 作词 : 朴树[00:01.000] 作曲 : 朴树[00:17.36]那片笑声让我想起[00:20.72]我的那些花儿[00:24.38]在我生命每个角落[00:28.21]静静为我开着[00:32.21]我曾以为我会永远[00:36.01]守在她身旁[00:40.11]今天我们已经离去[00:43.85]在人海茫茫[00:47.08]她们都老了吧?[00:50.76]她们在哪里呀?[00:55.23]幸运的是我[00:58.83]曾陪她们开放[01:02.99]啦.....想她[01:10.67]啦.....她还在开吗?[01:18.43]啦.....去呀[01:26.38]她们已经被风吹走[01:30.12]散落在天涯[01:33.22][01:49.61]有些故事还没讲完[01:53.47]那就算了吧[01:57.16]那些心情在岁月中[02:01.06]已经难辨真假[02:05.21]如今这里荒草丛生[02:09.06]没有了鲜花[02:13.04]好在曾经拥有你们的春秋和冬夏[02:20.29]她们都老了吧?[02:23.85]她们在哪里呀?[02:28.54]幸运的是我曾陪她们开放[02:35.83]啦.....想她[02:43.54]啦.....她还在开吗?[02:51.28]啦.....去呀[02:59.42]她们已经被风带走[03:03.20]散落在天涯[03:06.82]啦……[03:14.54]啦……[03:22.42]啦……[03:30.02]……[04:01.98]人们就像被风吹走插在了天涯[04:08.66]她们都老了吧?[04:12.26]她们还在开吗?[04:16.74]我们就这样[04:20.74]各自奔天涯[04:25.16]"
}
]
});
ap.init();
1.如何添加歌曲
只需要在进入163网易云音乐,随便打开一首你喜欢的歌曲,在地址栏中的末尾会出现歌曲的数字标识符,把它复制过来,添加到下面的公式上就好。
或者点击生成外链播放器也可查看 ,数字都是一样的!
如:
公式为:
http://music.163.com/song/media/outer/url?id=****.mp3
把 id 覆盖掉 **** 号即可
这种方式不易出错!
2.效果演式
始终停留在左下角 ,滚动也是如此!
取消固定 即将fixed赋值为false,则播放器会到侧栏中!
二、第二种样式
依旧放在博客侧边栏(这个是单音乐类)
另一个模式:单音乐
var iii = document.createElement('iframe');
iii.src = '//music.163.com/outchain/player?type=2&id=28996922&auto=1&height=66';
iii.height = 86;
iii.width=200;
$("#aplayer").after(iii);
2.效果演示
二、第三种样式
这种方法就不那么麻烦了,直接用自己的歌单就行,不用像第一种样式自己一个一个加音乐到歌单代码里了!!
这个跟前面不一样,这个代码要放到页脚/页首!
1.歌单id在哪?
将这串数字替换代码中data-id后面的数字即可!
2.效果演示
有问题大家多多交流!请大家雅正!