快捷搜索:  汽车  科技

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(2)音频的控制原理是换掉这些外链里的ID。比如虾米音乐外链是http://link.hhtjim.com/xiami/1769962750.mp3,你把“.mp3”前面那串数字换成歌曲ID就行。而虾米的歌曲ID是点击歌曲名进入内容页,页面网址里“song/”后面那串数字。首先,音乐交互的实现需要使用H5页面制作工具iH5——请在电脑端打开网站www.ih5.cn,点击右下角的“新建案例”开始制作。H5音乐的交互之旅就此启程!【1】添加音频还好音乐盈利空间没有视频那么大,其实获取QQ、网易、阿里、百度音乐的外链,你在网上随便一搜(比如百度“虾米音乐外链”),都有公开的方法。当然这算是一个“灰色地带”,地址大多是第三方网站自己解析出来的。

1分钟技能GET:每天提供一项实用技能

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(1)

不管你是QQ音乐热心用户、网易音乐爱好者还是虾米音乐的粉丝,只要你符合以下两个特征,这篇文章就是为你准备的:

(1)希望有逼格地分享自己喜欢的音乐;

(2)愿意多学一门实用又好玩的互联网技艺。

首先,音乐交互的实现需要使用H5页面制作工具iH5——请在电脑端打开网站www.ih5.cn,点击右下角的“新建案例”开始制作。H5音乐的交互之旅就此启程!

【1】添加音频

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(2)

还好音乐盈利空间没有视频那么大,其实获取QQ、网易、阿里、百度音乐的外链,你在网上随便一搜(比如百度“虾米音乐外链”),都有公开的方法。当然这算是一个“灰色地带”,地址大多是第三方网站自己解析出来的。

原理是换掉这些外链里的ID。比如虾米音乐外链是http://link.hhtjim.com/xiami/1769962750.mp3,你把“.mp3”前面那串数字换成歌曲ID就行。而虾米的歌曲ID是点击歌曲名进入内容页,页面网址里“song/”后面那串数字。

(2)音频的控制

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(3)

近期比较迷80年代的欧陆舞曲,顺便用三首迪斯科舞曲做个简易版播单。如上图,主要通过设计一个替换音乐外链的事件来实现。

iH5允许对音频做6种控制:(1)设置属性(2)继续播放(3)从头播放(4)暂停(5)下载(6)从某个时刻开始播放。其中,设置属性就能用来修改音频外链。

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(4)

比如上面设计第二首歌的播放,只需要设定点击按钮时,音频的资源位置变成对应的外链,再加个让音乐从头播放的事件就行。

(3)植入现成歌单

咦,你是懒癌患者?那最后这个大招最适合你了,不仅快效果还好,直接嵌入音乐网站现成的播放器和歌单吧。

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(5)

如上图,网易在歌单页面里有一个“生成外链播放器”的按钮。点进去是iframe和flash两种播放器插件,你需要做的是复制出前者的HTML代码。

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(6)

如果用后面的flash播放器,没有越狱的苹果用户估计会听不了。

h5里的音乐为什么不是连续的(掌握用H5听音乐的逆天技能)(7)

如图,新建一个富文本,激活HTML代码编辑模式,把这串代码粘贴进去就OK了。当然,需要注意的是,播放器的宽(width)和高(height)需要通过修改代码进行设置。最后点击预览,你就会发现页面已经“植入”了网易的MP3播放器。

但这种播放器有一点缺陷,不能通过触摸页面滑动歌单,还需要点击右侧那个细细的滑块,才能控制歌曲列表的位置。

虾米也提供外嵌入播放器,但取它的代码比较隐晦,得在歌曲页面下方“设置”那个按钮选“生成虾米播播”才行——而且它的播放器比较丑,不建议使用。

猜您喜欢: