写字

【FM 46.26】Alpha版发布

很早就想用HTML5技术做一个音乐相关的应用。偶然间发现了悦读FM,听好听的声音带着感情朗读文章的感觉挺不错,于是就在iOS的Safari上实践一下。本以为只是一个非常简单的应用,控制音乐播放、暂停,一个晚上做下来也才勉强完成。

【FM46.26】目前Alpha版完美支持iPhoneiPod touch,iPad和桌面Chrome浏览器上也可以用,只是样式没有针对分辨率做特别的优化,所以不算完美

Alpha版界面如下:

  

左边是直接用touch上safari打开的效果,右边是存为桌面书签后的启动效果,和Native App差别不大了。整个页面上面的题图和下面的文字区域高度按照黄金分割比例,图片底部一条半透明的层表示当前的播放进度,播明层下面还有一条细的红线,表示当前缓存数据的进度。

应用地址:http://tvrcgo.com/p/fm,也可以拿iPhone扫描下面的QR码直接访问:

开发小结

1. HTML meta

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />

Web App比较常用的HTML meta。

2. Audio 标签的操作

几个主要的事件和属性:

//页面上audio标签的ID=“audio”
var audio = document.getElementById('audio'); 

// 事件监听
var bind = function(evt, fn){
  audio.addEventListener(evt, fn, false);
};

// 数据下载
bind('progress', function(){
  var buffered = audio.buffered.end(0); // 已缓存下来的媒体数据长度
  var total = audio.duration; // 媒体数据总长度
  var percent = (buffered*100/total).toFixed(2); // 缓存百分比
});

// 数据缓存一部分,可以播放,但播放中可能会因为缓存而暂停
bind('canplay', function(){
  audio.play();
});

// 播放中
bind('timeupdate', function(){
  var played = audio.currentTime; // 已播放的长度
  var timeLeft = audio.duration - played;
}

3. iOS 下Audio内容的预加载问题

开启了Audio的预加载之后,在桌面Chrome下测试正常,但到iOS的safari上就无法载入媒体数据,并分发出abort事件。在Safari Developer Library中查到依据(点击看大图):

苹果考虑到用户使用蜂窝数据上网的情况,媒体预加载有可能会导致很大的流量消耗,所以必须要用户通过点击来启动媒体数据加载。对用户来说算是很贴心。

文档地址:Safari HTML5 Audio and Video Guide

4. position:relative 定位

这里涉及到的定位不复杂,整个页面高度100%,图片区占61.8%,白色文字区占38.2%。在播放进度条的定位时有一个小地方要注意:进度条是整个图片区DIV的子结点,是图片区内的绝对定位,要先将图片区DIV的position设为relative。具体如下:

<div id="banner">
  <div id="progress"></div>
</div>
#banner {height:61.8%;position:relative;}
#progress {position:absolute;bottom:0;width:100%;}

参考:

[1] Safari HTML5 Audio and Video Guide – iOS-Specific Considerations
[2] http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/
[3] http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/