【绝代双骄】【连城诀】

【连城诀：如何制作手机连播】

谢谢美风的建议，我把这个连播秘籍（连城诀）稍作解释一下。这是网上看到的Last Rose Studios介绍html5的audio playlist。

秘籍分三部分：

1. 连城诀第一部分：欲练神功，Java不懂，也能成功。

这部分是css和Java Script code，你可以一字不差地copy。

<style type="text/css">#playlist,audio{background:#dddddd;width:400px;padding:20px;} .active a{color:#5DB0E6;text-decoration:none;} li a{color:#0000ff;background:#dddddd;padding:5px;display:block;} li a:hover{text-decoration:none;} </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ var audio; var playlist; var tracks; var current; init(); function init(){ current = 0; audio = $('audio'); playlist = $('#playlist'); tracks = playlist.find('li a'); len = tracks.length - 1; audio[0].volume = .10; playlist.find('a').click(function(e){ e.preventDefault(); link = $(this); current = link.parent().index(); run(link, audio[0]); }); audio[0].addEventListener('ended',function(e){ current++; if(current == len){ current = 0; link = playlist.find('a')[0]; }else{ link = playlist.find('a')[current]; } run($(link),audio[0]); }); } function run(link, player){ player.src = link.attr('href'); par = link.parent(); par.addClass('active').siblings().removeClass('active'); audio[0].load(); audio[0].play(); } });//]]> </script>

2. 连城诀第二部分：欲练神功，播放器居中。

这是播放器和第一首：只需要放第一首的链接。

<audio id="audio" preload="auto" tabindex="0" controls="" autoplay="true" > <source src="http://cdn.wenxuecity.com/upload/media/6b/89/7e/b81ffec97281LlWVrvps.mp3" /> Your brower does not support audio tag</audio>

 

3. 连城诀第三部分：欲练神功，链接、歌名填空。

这是列表：放上链接和歌名。

<ul id="playlist"> <li class="active"><a href="http://cdn.wenxuecity.com/upload/media/6b/89/7e/b81ffec97281LlWVrvps.mp3">粉红色的回忆 </a></li> <li><a href="http://upload.newmusicland.com/files/musicatt/1411703610.mp3">不再孤单-填词：海上云 后期：四影 </a> </li> <li><a href="http://cdn.wenxuecity.com/upload/media/64/27/06/10106f1a9397MCZcRJka.mp3">待我长发及腰 </a> </li> <li><a href="http://cdn.wenxuecity.com/upload/media/4f/95/5e/c0c2f9b60385w1vBcmCx.mp3">阡陌-后期：四影 </a></li> </ul>

 

附上莺歌和飞渡的二十首歌，唱坛的天籁之声，交替播放，风姿卓越如兰菊更迭起舞（代舞），明媚耀眼似双星交互辉映。

【绝代双骄专辑】

莺
歌 灵
飞 云 停
渡 人 间 情
绝 纯 之 羽 翎
代 舞 兰 菊 婷 婷
双 星 灿 灿 照 玉 磬
骄 才 天 籁 众 人 儿 倾

 

（最近流行宝塔诗么？ ）

• 【Turn Me On】 by ingale
• 【Nine Million Bicycles】 by 飞渡
• 【爱你在心口难开】 by ingale
• 【I Only Want To Be With You】 by 飞渡
• 【梅兰梅兰我爱你】 by ingale
• 【采红菱】 by 飞渡
• 【美丽笨女人】 by ingale
• 【采槟榔】 by 飞渡
• 【我等到花儿也谢了】 by ingale
• 【青花瓷】 by 飞渡
• 【为你我受冷风吹】 by ingale
• 【未央】 by 飞渡 （偶然曲/海上云词）
• 【一个人跳舞】 by ingale
• 【重整河山待后生】 by 飞渡
• 【寂寞让我如此美丽】 by ingale
• 【血疑主题歌】 by 飞渡
• 【飘洋过海来看你】 by ingale
• 【我在人民广场吃炸鸡】 by 飞渡
• 【I Believe】 by ingale
• 【You Are So Vain】 by 飞渡

所有跟帖： 

• 双骄沙发~~啊· 还有我的炸鸡：DD -偶尔闪闪- ♂ (0 bytes) () 08/30/2016 postreply 13:45:32

• 海上导师这课含金量太高乐~有连城诀学习 有两天籁伴读 外加宝塔诗欣赏，唱坛童鞋幸福娃：）） -偶尔闪闪- ♂ (0 bytes) () 08/30/2016 postreply 17:51:49

• 原来三高是因为炸鸡吃多了啊~~闪闪太一针见血了~~ -偶尔ok- ♀ (0 bytes) () 08/31/2016 postreply 14:48:34

• 托你的幅, 我又吃了一遍炸鸡 :D -飞渡- ♀ (0 bytes) () 08/31/2016 postreply 08:01:19

• 同幅肥肚肚~~，有哥们儿如你 引以为骄：D -偶尔闪闪- ♂ (0 bytes) () 08/31/2016 postreply 12:35:19

• 坐地板听天籁, 学习coding. -hot_powerz- ♀ (0 bytes) () 08/30/2016 postreply 15:14:46

• 果断抱走收藏～～巨赞海才，超牛！！ -潇洒走红尘- ♀ (0 bytes) () 08/30/2016 postreply 16:25:24

• 我大爱的两位偶像。。。。。。 -潇洒走红尘- ♀ (237 bytes) () 08/31/2016 postreply 09:09:20

• 马上把code打包送上~~ -偶尔ok- ♀ (0 bytes) () 08/31/2016 postreply 15:41:38

• 海才，现在我相信你是出色的理工蓝了！！！ 题目应该改为绝代双娇，美不胜收！！！ -beautifulwind- ♀ (182 bytes) () 08/30/2016 postreply 21:41:03

• 终于回归本职了~~ -偶尔ok- ♀ (107 bytes) () 08/31/2016 postreply 14:45:04

• 记住一点，在这里，用娇一定会更招人喜欢滴：） -beautifulwind- ♀ (35 bytes) () 08/31/2016 postreply 20:22:52

• 这是来自人间的吗 -jk- ♀ (500 bytes) () 08/30/2016 postreply 21:44:09

• 绝代双娇！ -偶尔XX- ♀ (0 bytes) () 08/31/2016 postreply 00:18:08

• Oh my King, 我一见代码就晕， -小小雪球- ♀ (274 bytes) () 08/31/2016 postreply 03:36:20

• 见贴三晕啊！ -ingale- ♀ (1408 bytes) () 08/31/2016 postreply 04:54:05

• 抱抱亲! 不说啥了 :D -飞渡- ♀ (0 bytes) () 08/31/2016 postreply 08:26:57

• 三高对上三晕~~在医学上完全解释通了~~ -偶尔ok- ♀ (0 bytes) () 08/31/2016 postreply 14:47:33

• 哈哈，调戏版和被调戏版有意思。。我赶脚以后应该给你家放一只大狮子，那你就跑出来冒泡了，嘎嘎：） -beautifulwind- ♀ (0 bytes) () 08/31/2016 postreply 20:18:09

• wow海菜子绝才！这招太好了涨姿势～绝代双骄棒呆了！大爱血疑主题歌太好听咋听都不腻～…… -welydl- ♀ (0 bytes) () 08/31/2016 postreply 06:15:22

• 谢谢韦帅! 这歌真是送对人了 :D -飞渡- ♀ (0 bytes) () 08/31/2016 postreply 08:00:33

• 记得血疑是你点播的~~ -偶尔ok- ♀ (28 bytes) () 08/31/2016 postreply 14:46:19

• TURN ME ON 是我最喜欢的一首歌啊. 为了这个给海才一个大大的拥抱! -飞渡- ♀ (2285 bytes) () 08/31/2016 postreply 07:59:31

• 文采太 -小小艾- ♀ (182 bytes) () 08/31/2016 postreply 12:20:52

• 一激动就想起武侠小说了... -飞渡- ♀ (206 bytes) () 08/31/2016 postreply 13:27:59

• 切，我把它当古文来读的 LOL -ingale- ♀ (0 bytes) () 09/01/2016 postreply 15:05:57

• 那啥，说你发飙最好看，你也别abuse啊，嘎嘎：） -beautifulwind- ♀ (0 bytes) () 08/31/2016 postreply 20:20:24

• 我一直以为如果不练连城诀，也会练明玉功或者嫁衣神功，没想到是练独孤九剑~~这一段说得太好了 -偶尔ok- ♀ (1300 bytes) () 08/31/2016 postreply 14:35:22

• 文盲的飘过，我读着都费劲，你咋记下来的，嘎嘎。 -beautifulwind- ♀ (0 bytes) () 08/31/2016 postreply 20:19:24

• 下笔太狠。。。 -ingale- ♀ (736 bytes) () 09/01/2016 postreply 15:05:15

• 肚肚歌才神才飞扬，痒目佩服使你算了！ -红卡原创- ♀ (0 bytes) () 09/05/2016 postreply 05:32:28

• 弓虽丁页 弓虽丁页 弓虽丁页！！！ -小小艾- ♀ (483 bytes) () 08/31/2016 postreply 12:13:26

• 谢谢艾总是这么热情的鼓励! 真心感谢! -飞渡- ♀ (0 bytes) () 08/31/2016 postreply 13:28:36

• 三高一出，吓得我马上检讨自己的饮食~~~ -偶尔ok- ♀ (0 bytes) () 08/31/2016 postreply 14:36:34

• $$和大家一起欣赏两位天籁歌手的妙音，专辑的code在贴里，可以直接copy and paste到html源代码模式下$$ -偶尔ok- ♀ (5917 bytes) () 08/31/2016 postreply 14:20:01

• 偶尔ok，偶尔小爱，偶尔英歌，偶尔飞渡，偶尔彼此死劲拍MP，偶尔俺看到，偶尔涨姿势，偶尔发现 -Sunflower28- ♀ (161 bytes) () 08/31/2016 postreply 15:04:28

• 这么难得双娇作品+海才子的CODE，再忙也得在后排使劲鼓10分钟掌！海才确实是大才子！原来还是IT精英！双娇也是震撼的精品！ -戎歌- ♀ (426 bytes) () 08/31/2016 postreply 15:30:00

• $$$谢谢热力、JK、XX、雪球、葵花、戎歌。和大家一起欣赏唱坛好声音。。。$$$ -偶尔ok- ♀ (0 bytes) () 08/31/2016 postreply 15:44:37

• 太有才了，没看懂。。。我曾经是java的ta啊专教html的呀呜呜 -sweethope- ♀ (0 bytes) () 08/31/2016 postreply 15:57:22

• 还是听歌吧，最喜欢那首血疑，日文真流畅啊 -sweethope- ♀ (0 bytes) () 08/31/2016 postreply 16:02:48

• 又一个秘籍出炉了！海才太牛了！唱坛有你好幸福！两大美女的歌一次性全部收下，慢慢听啰！ -singmysong- ♀ (0 bytes) () 09/01/2016 postreply 10:29:29

• 飞渡和ingale两把好嗓唱的歌都非常的棒，海才有才。 -yy888- ♀ (32 bytes) () 09/01/2016 postreply 12:24:34

• 太感谢了。 -书菲- ♀ (0 bytes) () 09/01/2016 postreply 12:55:00

• 谢谢偶尔！ -momo_sharon- ♀ (0 bytes) () 09/01/2016 postreply 15:55:14

• 今天才有一点时间听，认真听ing~~ -DHSH_XC60- ♀ (0 bytes) () 09/02/2016 postreply 05:34:26

• 立马将海才的宝贝抱走了，无比欣赏英格和飞渡的天籁歌声，谢谢分享！！！ -微雨如酥- ♀ (0 bytes) () 09/02/2016 postreply 08:10:42

• 谢谢，收下学习，一直以为文学城会删去javascript -DingZhuang- ♀ (0 bytes) () 09/02/2016 postreply 16:29:19

• 非常好听的歌 -gardenart- ♀ (0 bytes) () 09/02/2016 postreply 17:07:48

• 旅行回来累得半死不活，只听了三首就醍醐灌顶，每个毛孔都畅快淋漓，真是福利啊 -豆基眼- ♂ (570 bytes) () 09/03/2016 postreply 09:30:45

• 海才你是最棒的！手藏！这下再也不用每次辛苦的找两个大腕的歌解渴了。 -xerl- ♀ (0 bytes) () 09/04/2016 postreply 17:08:43

• 海牛你还能再牛点不？你是最牛滴坛宝宝！真像叉叉说滴，再也不用每次辛苦找2位大腕滴歌解谗了：）果断手藏！ -红卡原创- ♀ (0 bytes) () 09/05/2016 postreply 05:11:16

• 此贴为使上最强贴！坚定玩鼻！ -红卡原创- ♀ (0 bytes) () 09/05/2016 postreply 05:36:11

• 海才就是大神人的代名词！飞莺两位都是我心目中女神级人物！ -北美小朱- ♀ (152 bytes) () 09/05/2016 postreply 13:58:23

• 赞海上老师的用心制作！然后慢慢欣赏两位美女的大作～ -麦禾阳光海岸线- ♀ (0 bytes) () 09/06/2016 postreply 04:00:05