Sublime Text
01打开Sublime Text工具，准备好如下图所示的目录结构，目录里面包括要插入的音频文件和一个html文件。
02打开HTML文件，新建一个空的HTML5文档结构，如下图所示，注意编码一定设置为UTF-8。
03接下来在body标签中插入audio元素，audio元素里面通过source引入音频文件，如下图所示，注意文件的类型要写对。
04运行编写好的页面程序，你会在网页中看到如下图所示的音频播放器，我们点击播放按钮就会自动播放音频。
05当然有很多的老版本的浏览器并不支持audio元素，这个时候我们可以在audio里面添加一个提示，当浏览器不支持audio元素的时候就会显示这个提示。
06如果想进入播放页面就立即自动播放音频内容，那么需要在audio中添加一个controls属性，如下图所示。
07最后，我列举了一下当前主流浏览器对HTML5里面audio元素的支持情况，大家可以做一下参考。
HTML5 中的新元素标签
src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：属性供添加播放、暂停和音量控件。
这些属性和<video>元素标签的属性很类似
常用的控制函数：
1.load()：加载音频、视频软件
2.play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
3.pause()：暂停出于播放状态的音频、视频文件
4.canPlayType(obj)：测试是否支持给定的Mini类型的文件
可脚本控制的属性值：
1.autoplay：自动播放已经加载的的媒体文件
2.loop为true：的时候则设定为自动播放
3.currentTime：以s为单位返回从开始播放到目前所花的时间
4.controls：显示或者隐藏用户控制界面
5.volume：音量值,从0.0至1.0之间
6.muted：设置是否静音
7.autobuffer：是否进行缓冲加载
audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
autoplay 设置或返回是否在就绪（加载完成）后随即播放音频。
buffered 返回表示音频已缓冲部分的 TimeRanges 对象。
controller 返回表示音频当前媒体控制器的 MediaController 对象。
controls 设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin设置或返回音频的 CORS 设置。
currentSrc 返回当前音频的 URL。
currentTime设置或返回音频中的当前播放位置（以秒计）。
defaultMuted 设置或返回音频默认是否静音。
defaultPlaybackRate 设置或返回音频的默认播放速度。
duration返回音频的长度（以秒计）。
ended 返回音频的播放是否已结束。
error 返回表示音频错误状态的 MediaError 对象。
loop设置或返回音频是否应在结束时再次播放。
mediaGroup 设置或返回音频所属媒介组合的名称。
muted 设置或返回是否关闭声音。
networkState返回音频的当前网络状态。
paused 设置或返回音频是否暂停。
playbackRate设置或返回音频播放的速度。
played 返回表示音频已播放部分的 TimeRanges 对象。
preload 设置或返回音频的 preload 属性的值。
readyState 返回音频当前的就绪状态。
seekable返回表示音频可寻址部分的 TimeRanges 对象。
seeking 返回用户当前是否正在音频中进行查找。
src 设置或返回音频的 src 属性的值。
textTracks 返回表示可用文本轨道的 TextTrackList 对象。
volume 设置或返回音频的音量。
方法 描述
addTextTrack() 向音频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间。
getStartDate()返回新的 Date 对象，表示当前时间线偏移量。
load() 重新加载音频元素。
play()开始播放音频。
pause() 暂停当前播放的音频。
推荐使用ckplayer，
最新更新日期：2018-01-10
修正了不能播放部分rtmp视频的bug
增加了删除缓动的api
升级方法
替换ckplayer.swf及ckplayer.js中112行!(function() {以下的内容
在ckplayer.js及ckplayer.xml中搜索“addCallback”属性节点，列表中增加deleteAnimate属性
最新更新日期：2017-12-14
调用播放器初始化时增加了一个属性playerID，可以在同页面多播放器时用来区分不同的播放器发出的监听事件
修正了一些无关紧要的bug
增加了h5部分对于控制栏的限制以及相对应的api
统一了flashplayer和h5的右键设置
增加了播放器动作按钮点击的监听函数clickEvent
升级方法
替换ckplayer.swf及ckplayer.js中112行!(function() {以下的内容
更新日期：2017-12-08
修正了h5字幕文件显示样式控制不了的bug
增加了控制控制栏显示/隐藏的接口
升级方法
替换ckplayer.swf及ckplayer.js中113行!(function() {以下的内容
搜索ckplayer.js以及ckplayer.xml中的addCallback属性，在其最后添加：“,changeControlBarShow”
更新日期：2017-11-24
修正了html5环境中视频出错时播放器上方不显示错误提示的bug
升级方法
替换ckplayer.swf及ckplayer.js中113行!(function() {以下的内容
更新日期：2017-11-23
1：增加了flashplayer中调用视频地址包含逗号时出错的bug
2：修正了当删除ckplayer.js的配置logo被删除后html5环境出错的bug
3：修正了html5中缓冲图标没有动画效果的bug
升级方法，1:替换ckplayer.swf、2：替换ckplayer.js中112行!(function() {以下的内容、3：在ckplayer.js中找到“m3u8MaxBufferLength: 30,”，在该行下面增加“split:',',”、4：在ckplayer.xml中找到“<m3u8MaxBufferLength>30</m3u8MaxBufferLength>”，在该行下面增加“<split>,</split>”
更新日期：2017-11-16
1：修复了ipad不能播放m3u8的bug
2：修改移动端默认不使用ckplayer自定义风格
3：html5风格中增加了倍速播放按钮列表
4：html5环境中增加了倍速播放api
升级方法，只需要替换ckplayer.swf以及ckplayer.js中112行!(function() {以下的内容
更新日期：2017-11-10
HTML5环境支持视频的旋转和缩放，修改的文件为ckplayer.js，修改的内容是videoRotation()函数和videoZoom()函数
更新日期：2017-11-07，更新内容（如果你不是使用的rtmp则无需更新）：
1：html5播放器统一使用ckplayerConfig()函数里指定的logo图片做为logo
2：修正了部分rtmp直播流无法播放的bug
3：修正了一些其它bug
ckplayer X版本升级说明，2017-11-01
一：重构代码
1：完全重构了ckplayer.js、ckplayer.xml，配置规则标准化。不再使用同一个属性定义多个值的形式进行配置。ckplayer.js中的html5部分采用自定义风格的功能。
2：完全重构了language.xml，语言包进行了可扩展升级。
3：完全重构了风格文件。不再采用以前版本的压缩包形式，而是仅采用style.xml进行配置，图片文件全部转化成base64使用，并且支持加密。保护您的插件。并且支持自定义按钮，图片或swf的功能。
二：功能方面的升级
1：广告部分增加了新的广告形式，插入广告，结尾广告，其它类型的广告（如横幅，角标等自定义显示时间），保留原来的前置广告，暂停广告。增加了广告展示监听，广告点击监听功能。
2：播放部分升级了对m3u8格式的内部支持，不再使用外部插件播放。
3：增加了flashplayer环境对m3u8文件的加密支持。
4：内置了清晰度支持功能，以及m3u8清晰度自动选择及显示的支持。
5：内置了弹幕显示功能，多种缓动效果。可以制作出多种弹幕显示效果。并且支持弹幕和播放器的互动，以前和js的互动。
6：重构了播放器的API
三：其它说明
本次升级是一次非常大的升级行为，跟之前版本基本毫无联系。调用播放器的代码更加简单高效智能化。
