html里的音频插件,html5音频播放插件

非常的小不到100行的代码，支持播放，暂停，停止，想要更多的的也没有了。

主文件是mkplayer.js

还有demo.html的示例文件

还有999.mp3音乐文件,这个自行找一个mp3文件，然后改下名字就好了

1.[代码]mkplayer.js

//mkplayer html5音频播放控件

//特点：简单，播放，暂停，停止；没有更多了

//灵活自定义：播放，暂停，停止按钮完全自行定义，只需要给mkplay,mkpause,mkstop的id即可

//足够的小：3kb

//作者：齐泽西

//邮箱：qizexi@163.com

//MKPlayer初始化函数

//audiourl 音频播放源地址

//audiotype 音频格式：默认audio/mpeg

//注1：播放按钮默认绑定'mkplay'

//注2：暂停按钮默认绑定'mkpause'

//注3：停止按钮默认绑定'mkstop'

function MKPlayer(audiourl, audiotype) {

//播放，暂停，停止控制按钮

var play = document.getElementById('mkplay');

var pause = document.getElementById('mkpause');

var stop = document.getElementById('mkstop');

//创建audio对象

var audio = document.createElement('audio');

//创建source对象

var source = document.createElement('source');

source.style.display = 'none';

source.setAttribute('src', audiourl);

if (audiotype) {

source.setAttribute('type', audiotype);

}

else {

source.setAttribute('type', 'audio/mpeg');

}

audio.appendChild(source);

//设置audio对象信息

audio.style.display = 'none';

//audio.src = audiourl;

document.body.appendChild(audio);

//获取音频的就绪状态

function getState(auObj) {

return auObj.readyState;

}

//获取音频的时常(单位：妙)

function getTimeLength(auObj) {

return auObj.duration;

}

//设置音频的播放位置

function setPlayIndex(auObj, index) {

auObj.currentTime = index;

}

//播放

play.addEventListener('click',function() {

if (getState(audio) == 0) {

return false;

}

audio.play();

return false;

}, false);

//暂停

pause.addEventListener('click', function() {

if (getState(audio) == 0) {

return false;

}

audio.pause();

return false;

}, false);

//停止

stop.addEventListener('click', function() {

if (getState(audio) == 0) {

return false;

}

setPlayIndex(audio, getTimeLength(audio));

return false;

}, false);

}

2.[文件] demo.html ~ 831B     下载(16)

HTML5 语音播放插件

div{width:100%;height:50px;line-height:50px;text-align:center;font-size:36px;}

#mkplay{background:#ccc;color:green;}

#mkpause{background:#ccc;color:yellow;}

#mkstop{background:#ccc;color:red;}

play

  

pause

  

stop

window.onload = function() {

MKPlayer('999.mp3');

}