微信公众号教程(18)微信音乐播放器开发 上

微信音乐播放器开发

 

一、Html5的audio组件

 

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用。

 

在sae的代码管理里新建一个HTML页面,命名为test.html。微信公众号教程(18)微信音乐播放器开发 上

 

html5的页面最基本的框架如下,橙色字为文档声明,有了这个就表明这是一个html5的页面。

 

微信公众号教程(18)微信音乐播放器开发 上

 

 

在<body></body>中添加一个音频元素:

 

<audio src="http://www.eduhope.cn/yx2011/audio_hi.mp3" controls="controls" autoplay="autoplay"></audio>

 

微信公众号教程(18)微信音乐播放器开发 上

在谷歌Chrome浏览器中访问这个url,效果如下:

 

微信公众号教程(18)微信音乐播放器开发 上

controls指的是用户控制界面,所以我们可以在Web页面中看到上面这个操作面板,包括播放和暂停,播放进度条,音量进度条,和进度时间显示等。autoplay 指的是自动播发已加载的媒体文件,所以我们一打开页面就可以直接播放了

 

无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件。

 

不过由于html5的标准还不统一,还有部分安卓系统内置浏览器是阉割了这些组件的,所以使用安卓手机的朋友如果在微信内置浏览器里无法欣赏音乐的,可以点击右上角分享按钮选择复制连接,然后到QQ浏览器里打开

 

二、设计个性的音乐播放器

 

使用浏览器默认的播放器肯定不够高端大气上档次,因此我们要自己设计一款音乐播放器,美工这块我就不写了,自己发挥吧……重点说下静态页面的结构。

 

在sae里打开audio.html文件,头部比前面的H5基本结构多了很多代码,不要慌我给大家解释下。

 

微信公众号教程(18)微信音乐播放器开发 上

第4行是定义该网页的类型和编码,决定浏览器将以什么形式、什么编码读取这个文件,这里是告诉浏览器这是一个html文件,用的UTF8编码。

 

第5行是这个页面的标题,会显示在浏览器的头部。

 

第6行是文档作者,就是我了。

 

第7行是控制屏幕大小的,width 页面宽度,nitial-scale - 初始的缩放比例,minimum-scale - 允许用户缩放到的最小比例,user-scalable - 用户是否可以手动缩放。这段代码用来限制播放器的显示大小与手机屏幕一致,不能缩放。

 

第9行是载入样式文件

 

第10、11、12行载入JS插件,其中common.js里是播放器控制JS代码,具体内容会放到最后一期讲。

 

进入页面主题首先是播放器结构,如下图:

 

微信公众号教程(18)微信音乐播放器开发 上

 

第16行是整个播放器的容器,规定了这个播放器的大小和位置,以及播放器的背景,这里提下如何把播放器绝对居中,CSS代码如下:

 

position:absolute;padding:5px;top:50%; margin-top:-155px; left:50%;width:300px;height:300px; margin-left:-155px;

 

此容器为相对于网页绝对定位,宽高为300px,内边距5px,整体大小为310*310px,距离页面的顶部和左边都为50%距离,然后通过外边距负155px让容器向顶部和左边移动一半的容器大小,这样就绝对居中了。

 

第17行唱片封面,叠加了一个背景图片。这里可能有人说为什么不直接用播放器容器背景图做唱片封面,这里主要是唱片封面是经常要切换的,网速不给力的话会出现一块空白不好看。

 

第18、19行喜欢按钮、列表按钮,也是使用了绝对定位,当然这个定位是相对于播放器容器的。

 

第20行播放控制区块,这里有个黑色渐变背景图案叠加在唱片封面图片,以突出显示歌曲标题、名字等信息。

 

第21、22行歌曲标题和歌手名字

 

第23到28行播放进度条区域,这里有两个div,pgbuf是歌曲缓存载入进度,pgtime是歌曲播放进度。

 

第29到30行前进、播放和后退播放按钮,播放按钮可以通过playbtn、pausebtn两个样式切换变为暂停按钮。

 

第37行歌曲的说明。

 

第38行Audio播放组件,这里给组件命名为song_player,然后就可以通过JS来控制这个播放组件,进行播放暂停操作,获取播放进度等。

 

第39行页面底部的版权信息

 

然后是歌曲列表部分,如下图:

 

微信公众号教程(18)微信音乐播放器开发 上

第40行歌曲列表容器,自适应宽度,默认隐藏。

 

第41行歌曲列表栏头部分

 

第43-45行列表内容类型切换以及列表关闭按钮

 

第48到57行歌曲列表内容

 

第58到65行列表翻页控制区

 

最后的展现效果如下:

 

微信公众号教程(18)微信音乐播放器开发 上

微信公众号教程(18)微信音乐播放器开发 上

 

前端静态页面基本就是这些,下一章讲管理后台、与前端页面数据交换接口的开发。

微信公众号教程(18)微信音乐播放器开发 上

上一篇:在iOS开发中自动获取当前的位置(GPS定位)


下一篇:Android的多语言实现