iTunes LP 的内部结构

原文链接；本文经由 Jay Robinson （杰伊·鲁滨逊）许可发布。

网页开发师杰伊·鲁滨逊对 iTunes 新增入的 LP 功能很感兴趣，他想要了解一下里面的结构，因此不妨跟随他一起，来一次虚拟拆解吧。

基本情况

iTunes LP 文件是一个超过 500MB 大小的，扩展名为 .ITLP 的封包。当你在 iTunes 中打开它的时候，将会借由浏览器来显示并占据整个窗口，接着照片淡入，音乐响起。页面中的链接将把你带入到最主要的功能之中，例如照片、视频以及歌词。

LP 的框架大小看上去像是 1280×720 ，不错的分辨率，但是纵向分辨率小于 842 像素的电脑会出现讨厌的滚动条，比如说 13 寸的 MacBook 。

下方是 Jay-Z 《蓝图3》专辑中的一些截图。

视觉化

有趣的是，当你点击「全部播放」的时候会呈现出视觉化的效果，这是颇具惊喜和创意的功能。Jay-Z 的这张专辑内置了三种视觉化效果，并会在其间切换。首先出现的是音频波形，不过可惜是固化效果，而非由音乐自动生成。三种效果的名称分别是：「波流」、「曲表」和「迷」。

然而，在欣赏 LP 曲目时还会带来意想不到的问题，Genius 合集中也有这样的情况出现，即无法得知目前正在播放歌曲是什么。这意味着除非退出 LP 模式，否则无法给歌曲评级或者查看其他相关数据。

这还会产生另外一个问题，退出 LP 并不会记录最后播放的信息，意味着当你想要在中途寻找某首歌曲的信息并重返 LP 时，要做好重新开始的准备。不过幸运的是这不会影响到播放计数功能。下方是「波流」效果的截图。

WebKit 和 iTunes LP 内部结构

鲁滨逊反复表达了对 LP 内部结构的好奇，他料想这玩意应该和 iPhone 程序类似（.IPA），于是他把 .ILTP 改成了 .ZIP ，结果没错，改名以后就可以一窥底细了。当然，也可以通过右键点击封包文件，再选择「检查包中内容」，不过估计苹果将在未来移除这项功能，而且改为 ZIP 也方便许多。下图是包内文件的截图。

LP 采用的技术或标准有：HTML 4.01、CSS 和 JavaScript ，界面非常类似 Flash ，但看不到它存在的痕迹。CSS 动画精巧而顺畅，字体通过 @font-face 在 CSS 中引用，但似乎用处不大，因为大多数文字，甚至长如歌词，也是通过 PNG 文件来呈现的，鲁滨逊猜测苹果原先是打算用字体来渲染文字，但最后改变了主意。（纯文本效果不及要求？），在 The Doors 的专辑中他发现了一些痕迹，比如说原始文件的名字是「song13BackgroundClean.jpg」，但真正使用的是「song13Background.jpg」这张，你可以在下图中看到他们的差别。

也许并不令人惊讶，LP 中的文件可以在最新版的 Safari （4.0.3）里很好的运行，除非某些请求 iTunes 响应的部分，例如电影文件。而 The Doors 的 LP 专辑中还遗留有开发时使用的文件，例如参考图片或是布局风格指南，见下图。

DRM

虽然用户的 iTunes 商店账号会被记录在 .PLIST 文件里，但是鲁滨逊并未发现 DRM （数字版权管理）的痕迹，即便在播放期间取消授权也依然能偶正常播放。他认为修改 .PLIST 文件也许可以将 LP 中的歌曲指向其他曲目。

总结

鲁滨逊对 LP 相当满意，而 LP 仅使用了 JavaScript 和 CSS3 提案中的部分功能就达到了这样的效果。视觉化提供了观赏音乐的另一种方式，有趣的是，许多人在观看 LP 中的 CSS 动画时，多以为是 Flash 制作出来的效果。

@Apple4us

「@TangchaProject: 字节社创始人李如一在网易应用中心的 iOS app 推荐：http://t.co/JGPLpuiD 」 04:14 May 16 from Tweetbot for iOS Reply Retweet Favorite

Safari 升级到 5.1.7 了。升级后，若系统内的 Flash 没有打最新的补丁就会禁用。另外据说改善了可用内存低时的反应速度。 03:34 May 13 from Twitter for Mac Reply Retweet Favorite

「@TangchaProject：是的，你现在可以把之前购买的唐茶「单行本」书籍免费迁移到字节社（ http://t.co/EOpXM0GC ）里阅读了。《唐茶单行本迁移指南》： http://t.co/OTyKu4Ag 」 03:42 May 9 from Twitter for Mac Reply Retweet Favorite

这个 DragonDrop 对于喜欢用鼠标拖拽的用户很有用： https://t.co/O8rNnU3C 01:32 May 9 from Twitter for Mac Reply Retweet Favorite

iOS 5.1.1 更新已出。 http://t.co/XKgdgTLI 01:34 May 8 from Twitter for Mac Reply Retweet Favorite

「@fool2nd：新项目 Markable (http://t.co/EQTNQxhP) 上线了。Markable 是一个在线 Markdown 编辑器，支持实时预览，自动保存和恢复，保存到 Dropbox，发布到 Tumblr 等。现在是 beta 版本，欢迎尝鲜。」 16:12 May 7 from Twitter for Mac Reply Retweet Favorite

「@lianghai：〈A Closer Look At Font Rendering〉是 Typekit 的〈Type rendering〉系列之后最值得读的字体渲染科普文章，内容细致而全面（还包括 hinting）……： http://t.co/N5IP3Amg」 11:35 May 7 from Twitter for Mac Reply Retweet Favorite

「@Otahr：第一次开发 iOS 应用，根据之前的想法做了一个可以随机文章的的阅读电台。 http://t.co/7tAhao8z 没有目录也没有历史记录，减少选择、去除浮躁心态，让人可以重新耐心的读完一篇好文章。希望大家可以试试看，给点反馈意见；）」 14:57 May 3 from Twitter for Mac Reply Retweet Favorite

最近的评论

It really a useful idea.I will have a tiral of this idea as soon as possible as have already frustrated by them for a long time.Thank you…

— michael kors coupon 评论《samsung-ssd-small》

composed by sbsbsb0416 learnt some interesting points from this post thanks a lot

— Glenn Hwang 评论《微软将全面支持基于 H.264 的 HTML5 网页视频》

Comfortably, the article is in reality the greatest on this noteworthy topic. I concur with your conclusions and will thirstily look forw…

— michael kors canada outlet 评论《samsung-ssd-small》

Rss好久看不到更新，来这里转转。

— hdpro 评论《更多神秘的盒子到达苹果零售店》

这是苹果三把

— 蓝牙耳机评论《更多神秘的盒子到达苹果零售店》

Cheap Michael Kors is the hotest handbags in 2012. Summer is coming! It is officially here! WAnd I realized that sometimes, it is decent …

— Cheap Michael Kors 评论《samsung-ssd-small》

Сайт о интересных и удивительных фактах, строениях. Мир стиля и дизайна. Д�…

— andfkiller 评论《「你会写电邮吗？」系列之一：引文在上 vs. 引文在下》

This website is actually fascinating i'm looking for is there the other examples? however anyway thanks greatly as a result of I found th…

— Snappy Dragons Premium 评论《苹果：iPod shuffle 线控耳机更换计划》

您好，请问知乎今年有没有招实习生的计划呢？我是一名大三学生，对知乎非常感兴趣，希望能有一个�…

— 和风评论《知乎团队招募工程师、产品经理和运营人员》

hey accept concern in force drastically attractive for their performance happy. integrated envelope conformation for these inbred habit i…

— Mulberry Bags Outlet 评论《samsung-ssd-small》

There usually are very couples of individuals who can write not so easy articles that creatively. Keep up the great work!! http://www.mic…

— Discount michael kors bags 评论《samsung-ssd-small》

I needed to compose you this little bit of note so as to say thank you again with your magnificent tactics you have shown in this case. I…

— Victor Senethavilouk 评论《[我生活在……] 2009-4-7》

I'm still learning from you, while I'm improving myself. I certainly love reading everything that is posted on your blog.Keep the aarticl…

— Lisa's Dating Blog 评论《AT&T：四成 iPhone 销量来自企业顾客》

After research a number of of the weblog posts in your web site now, and I truly like your means of blogging. I bookmarked it to my bookm…

— advice blog 评论《苹果触控专利技术——3.有触觉反馈的触控键盘》

An fascinating dialogue is value comment. I feel that it is best to write extra on this topic, it may not be a taboo subject however typi…

— Advice for Dating Women 评论《苹果公司今日宣布 WWDC 于 6 月 7-11 日召开》

不知道有什么创作工具可以支持

luwei @ 2009/09/17,12:43(#)

Dashcode

@@ @ 2009/09/17,14:18(#)

买了MUSE的《resistance》 iTUNES LP
大概是期望太高，很失望。
12张图片，三段视频。唱片幕后名单。
最囧的是显示歌词的情况下竟然不能连续播放-_-

ez2die @ 2009/09/17,14:32(#)

没有太大的意义
不过这样苹果确实需要一个数据库
哈哈

wsjhhu @ 2009/09/17,16:06(#)

哈哈，muse的音乐确实比较古怪啦

veltreng @ 2009/09/17,18:39(#)

Dashcode只能算个简单的打包器。我指的是能支持动画等多媒体创作并输出成HTML/CSS/JS的艺术创作工具，就像用Adobe Flash来做Flash动画。

luwei @ 2009/09/17,19:47(#)

现在css动画还没有timeline的概念。css动画做为web design的补充，并不可能完全取代flash。
目前还是需要手动编写脚本已实现动画播放。
编辑一段剧本不是特别方便。

cloudchen @ 2009/09/17,21:24(#)

今天去下了一个做的还不错如果是Fans的话应该会收藏的.

rikuta @ 2009/09/17,22:16(#)

rikuta @ 2009/09/17,22:17(#)

不过the doors的LP还不错～如果有闲钱收收留念还不错，不知道这东西能流行多久～

ian @ 2009/09/17,22:45(#)

@“今天去下了一个做的还不错如果是Fans的话应该会收藏的. ”
这个价格可以去收藏黑胶了。从什么时候开始歌词，小册子变成了应该额外付钱的东西？那些访谈视频你真的会反复看？youtube上都会有。配合音乐的视觉效果？。。。苹果疯了么？有无数插件可以做到。
这东西做成免费附加的内容还可以，再次提价真的不可理喻。一堆数码文件的价格，不但超过了CD，甚至接近了黑胶。

ulyssestone @ 2009/09/18,10:18(#)

另外，如果这个文件大小可以接受，请先把音乐文件本身提升到无损吧。

ulyssestone @ 2009/09/18,10:42(#)

私の名前はジェイロビンソンです。
私はこの記事を書いた- http://jwr.cc/x/3
あなたが私のハードワークの適切なクレジットを提供するだろうか？

Jay Robinson @ 2009/09/18,12:47(#)

楼上的认为apple4是日本人的网站？

engic @ 2009/09/19,00:02(#)

翻译的文章没有署名，人家找上门来了！

Joel @ 2009/09/19,00:12(#)

我已同 Robinson 做了沟通，意外的是，他欣然同意我们转载这篇文章。
近来的一些文章没有标注来源，是我的失误，很抱歉。总之非常感谢诸君的监督与指正！

Oliver.C @ 2009/09/19,05:24(#)

Fields in bold are required. Email addresses are never published or distributed.

Some HTML code is allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
URLs must be fully qualified (eg: http://apple4.us),and all tags must be properly closed.

Line breaks and paragraphs are automatically converted.

Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.

iTunes LP 的内部结构

16 Comments so far

Leave a comment

@Apple4us

友情链接

最近的评论