HTML5音乐播放器(二):基本的控制

这一节我们主要讲讲基本的播放功能:播放,暂停,下一曲,上一曲;网上讲解很多,但我们还是先俗套的说说基本的标签和属性吧:)

<audio src="音频的地址">备用(当浏览器不支持audio时显示的内容)</audio>

audio 的控制函数主要有:

控制函数 功能说明
load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
play() 加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有:

只读属性 属性说明
duration 获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
paused 如果媒体文件被暂停,则返回true,否则返回false
ended 如果媒体文件播放完毕,则返回true
startTime 返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currentSrc 以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件


audio 可脚本控制的特性值:

特性 特性说明
autoplay 自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放,或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性

现在各个浏览器的最新版本基本上都能跑 HTML5 了,包括 IE 这个让广大前端同学头疼的大家伙。但悲剧的是,各个浏览器所支持的媒体文件类型又不仅相同了,好吧,咱们都习惯了,这些家伙什么时候统一过?看表吧。

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

好了,终于该到代码部分了,这个播放器没采用任何脚本框架,主要是想好好练习下原生的javascript,天天用框架,都被惯坏了,哈哈。
这次代码的编写也用到了面向对象的思想,抛去播放器的外壳,把整个播放器的当成一个对象,每个功能(如:音量,播放,歌曲信息的吞吐等)都拓展为一个方法,并把实现功能过程中的视觉效果写在外面去调用,方面以后修改,也使得思路更清醒。
基本的播放控制很简单,就用到了play() 和 pause(),注释写的比较多,放代码吧,例子在最后,音乐文件要加载,有时可能比较慢,现在只有播放,暂停,上一曲,下一曲,其他功能和细节优化会陆续加入,点击下一曲的歌曲切换方式可以看这里:)

//---------------------------------------------------【绑定事件】
(function(){ ... })();
//---------------------------------------------------【构造函数 MUSICENGINE】
function MUSICENGINE(song){
    //创建播放器
    var musicEngine = document.createElement("audio");
    musicEngine.id = "musicEngine";
    document.getElementById("musicPlayerWrap").appendChild(musicEngine);
    //获取歌曲
    this.song = song;
    //获取播放器
    this.musicPlayer = document.getElementById("musicEngine");
}
//---------------------------------------------------【功能:播放&暂停】
MUSICENGINE.prototype.toPlay = function(toPlay){
    var play = document.getElementById("play"),
        pause = document.getElementById("pause");
    //播放第一首
    if(this.musicPlayer.src === ""){
        this.playIndex(0,0);
    }
    //如果媒体文件被暂停,则返回true
    if(toPlay === "play"){
        this.musicPlayer.play();
        this.playbackProgress("play");
        hide(play);
        show(pause);
    }
    if(toPlay === "pause"){
        this.musicPlayer.pause();
        this.playbackProgress("pause");
        show(play);
        hide(pause);
    }
};
//---------------------------------------------------【功能:下一曲】
MUSICENGINE.prototype.next = function(){
    //获取歌曲的播放方式
    var mode = document.getElementById("nowPlayManner").title;
    //发送给songPlayMode()方法,让它处理如何播放下一首
    this.songPlayMode("next",mode);
};
//---------------------------------------------------【功能:上一曲】
MUSICENGINE.prototype.prev = function(){
    //获取歌曲的播放方式
    var mode = document.getElementById("nowPlayManner").title;
    //发送给songPlayMode()方法,让它处理如何播放下一首
    this.songPlayMode("prev",mode);
};
//---------------------------------------【功能:根据歌曲的播放方式分配下首歌曲的引索】
MUSICENGINE.prototype.songPlayMode = function(direction,mode){ ... };
//---------------------------------------【功能:根据系统返回的歌曲&专辑引索,准备播放器】
MUSICENGINE.prototype.playIndex = function(albumIndex,songIndex){ ... };
/**
 * 一些基础功能
 */
//---------------------------------------------------【控制播放器打开隐藏】
function musicPlayerSwitch(){ ... }
//-----------------------------------------【检查元素是否含有某个特定的类,如果有,则返回true】
function hasClass(element,className){ ... }
//---------------------------------------------------【为匹配的元素添加指定的类名】
function addClass(element,className){ ... }
//---------------------------------------------------【为匹配的元素添加替换指定的类名】
function replaceClass(element,hasClassName,replaceClassName){ ... }
//---------------------------------------------------【控制匹配的元素显示隐藏】
function show(element){ ... }
function hide(element){ ... }

猛击demo ☻

发表评论

电子邮件地址不会被公开。 必填项已用*标注

15 thoughts on “HTML5音乐播放器(二):基本的控制