码迷,mamicode.com
首页 > Windows程序 > 详细

使用Audio API设计绚丽的HTML5音乐播放器

时间:2017-03-14 14:55:57      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:包括   3.0   准备   技术分享   容器   创建   错误代码   框架   解码器   

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

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

浏览器支持情况:

浏览器

支持情况

编解码器

Chrome

3.0

Theora 、 Vorbis 、Ogg

H.264 、 AAC 、MPEG4 

FireFox

3.5

Theora 、 Vorbis 、Ogg

IE

不支持

Opera

10.5

Theora 、 Vorbis 、Ogg(10.5)

VP8、Vorbis 、 WebM(10.6)

Safari

3.2

H.264 、 ACC 、MPEG4

 

 常用的控制函数:

函数

动作

load()

加载音频、视频软件

play()

加载并播放音频、视频文件或重新播放暂停的的音频、视频

pause()

暂停出于播放状态的音频、视频文件

canPlayType(obj)

测试是否支持给定的Mini类型的文件

 

 只读的媒体属性:

只读属性

duration

获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN

paused

如果媒体文件被暂停,则返回true,否则返回false

ended

如果媒体文件播放完毕,则返回true

startTime

返回起始播放时间

error

返回错误代码

currentSrc

以字符串形式返回正在播放或已加载的文件

 

 可脚本控制的属性值:

属性

autoplay

自动播放已经加载的的媒体文件

loop

为true的时候则设定为自动播放

currentTime

以s为单位返回从开始播放到目前所花的时间

controls

显示或者隐藏用户控制界面

volume

音量值,从0.0至1.0之间

muted

设置是否静音

autobuffer

是否进行缓冲加载

 

首先,我们在页面中添加一个音频元素:

<audio src="../Media/The sound of silence.mp3" controls="controls" autoplay="autoplay"></audio>

在谷歌Chrome浏览器中的效果如下: 

技术分享

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

 

HTML5 Audio API 的界面很强大,功能也很完善,但是我们的Web应用会根据不同的需求、设计风格和界面颜色来要求不同的播放器样式和功能,这就要求我们能基于他们的API 设计出灵活的应用。

 

接下来,我们设计一款适合我们离线工作系统需要的播放器:

技术分享View Code

 

画好这个结构之后,我们就来写相应的CSS样式了: 

技术分享View Code

 

页面的元素和CSS样式写完之后,就可以看到一个漂亮的音乐播放器的模型了,如图:

技术分享

   

 

只是现在的播放器上面的按钮都是空壳,没有任何功能。所以,现在我们就来添加这些功能 , 脚本的顶层框架就用Jquery。 

技术分享View Code

  

至此,一款播放器做完了,默认执行的是列表循环播放,包含了上一首,下一首,播放,暂停,播放进度条调整,音量调进度条整,列表选择等功能。播放的歌曲是固定的写在列表里面的,我喜欢的ESON的照片也是贴上去的,这些都可以做成动态获取或则与服务器交互,有兴趣的可以去试一下,扩展一下。

本来准备在我们的离线工作系统中添加音频播放器,后来需求变更,放弃了,所以这个版本不是完善的版本。视频播放器的功能大同小异,也可以自己试试。

技术分享

使用Audio API设计绚丽的HTML5音乐播放器

标签:包括   3.0   准备   技术分享   容器   创建   错误代码   框架   解码器   

原文地址:http://www.cnblogs.com/chenliyang/p/6548437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!