采用jQuery Mobile开发，页面使用HTML5语言编写完成，并利用js添加响应事件等
第一阶段为静态页面的开发
第一步，确定页面需求
1） 歌手图片，歌手基本介绍
2） 一般音频播放器的控制按钮，包括播放暂停、上下曲；以及控制播放模式的按钮
3） 显示当前播放歌曲、当前播放歌曲时间以及进度条
第二步，实现基本的HTML页面，该过程不是本文的重点，故不进行详述
第三部，添加各种事件监听，实现音频播放器的基本功能
1） 歌曲间的切换：每一首播放完后，切换到下一首
对每个<audio>对象添加一个onclick()="next()"事件，这样每一首播放完了就会执行next()函数，在js中实现该函数
2） 控制播放模式
在js中定义四个变量，list_play/list_loop/single_loop/random_play，分别带便列表播放、循环播放等；将控制播放模式的控件写成一个form控件<input type="button">，并添加onclick()="p_control()"事件，每次点击对播放模式进行切换
同时进行按钮内文本的更新，具体操作：
var pattern_control = document.getElementById("pattern_control");
pattern_control.value = "播放模式：列表循环";
$('[type="button"]').button('refresh');
3） 控制播放暂停以及上下曲按钮，将三个按钮写成一个group，水平显示
<ul data-role="controlgroup" data-type="horizontal">
在每个<li>添加图片<img>，考虑到在手机上显示，将图片改成36px*36px
为每个<li>添加click事件，比如下一曲的<li>：$("#next").click(function()，调用next()函数
这里要注意的一个问题是控制播放暂停的按钮，每次点击都需要对<img>进行更新，$('#img2').attr("src", 'images/pause.png').trigger('refresh');修改attr值，并触发refresh事件对<img>进行更新
4） 进度条，使用<div>里面嵌入另一个<div>，背景颜色不同，歌曲播放过程中对进度条进行更新
<div data-inline="true" data-inset="true" id="progressBar" class="ui-block-a progressBar" style="width: 80%; height: 10px; background-color:#ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;"><div
id="progress" style="background-color:#9c9d8b; height:10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;"></div></div>
对<audio>添加ontimpupdate="updateProgress()"事件，即每当歌曲的播放进度不同时会出发该事件
进度条不只要能实现当前进度的显示（该过程比较简单，通过歌曲的currentTime和duration获取百分比，并利用该百分比来决定子<div>的宽度），还要实现对屏幕点击事件的响应，从而调整进度，对该<div>添加click()事件，获取当前点击位置的坐标e.pageX，并获得进度条的偏移var div_offset = $("#progressBar").offset().left;；相减即可得到点击位置的偏移，从而更新歌曲的currentTime
5）当前歌曲进度的时间显示
主要获取当前歌曲的currentTime和duration，并利用conversionTime(time)将该时间转化成显示的形式0:00，并利用music_currentTime.innerHTML对文本进行更新
6） 显示当前播放歌曲，实现一个动态效果，左移/右移；顶一个moving函数，利用$("#current_song").css('padding-left', '+=2');对CSS进行修改，并添加一个lr_control变量，来判断当前是左移还是右移
最后，将moving()函数添加进updateProgress()，即每当歌曲播放进度改变时，会出发该函数
7）歌曲列表是做成一个checkbox列表，为的是用户能够选中自己想播放的歌曲列表，从而根据播放列表以及当前播放模式来播放
因此next()和previous()函数实现起来比较麻烦
最终的界面在电脑上显示如图