直接奉上示例代码，废话就不多说了。
复制代码
代码如下:
html audio api
html5 audio api
html5 audio api demo by learnshare.
last update @2013-04-23 20:40:00
+ add info table
update @2013-04-22 14:54:00
+ add dom events
update @2013-04-22 12:47:00
+ add getcurrentsrc button
view code on learnshare.github.io.
api reference: htmlmediaelement and audio/video dom references
audio element
open the developer tool to view console logs.
controls
play
pause
getpaused
getended
volume-
volume+
getvolume
getsrc
playmusic1
playmusic2
removemusic
getcurrentsrc
getinitialtime
getduration
getseeking
jumpto_30s
getcurrenttime
getplayed
autoplay_on
autoplay_off
getautoplay
controls_show
controls_hide
getcontrols
loop_on
loop_off
getloop
preload_metadata
getpreload
getdefaultmuted
mute
unmute
getmuted
getdefaultplaybackrate
playbackrate-
playbackrate+
getplaybackrate
getnetworkstate
getreadystate
getbuffered
getseekable
player attrs
autoplay:
controls:
defaultmuted:
defaultplaybackrate:
loop:
preload:
player info
src:
currentsrc:
duration:
currenttime:
ended:
paused:
muted:
volume:
playbackrate:
play status
networkstate:
readystate:
buffered:
seekable:
played:
error:
audio-controls.js
复制代码
代码如下:
window.onload=function(){
// get autio element
var audio=document.getelementbyid(audio);
// play()
document.getelementbyid(play).onclick=function(){
audio.play();
console.log(play);
};
// pause()
document.getelementbyid(pause).onclick=function(){
audio.pause();
console.log(pause);
};
// get paused
document.getelementbyid(get_paused).onclick=function(){
console.log(audio.paused: +audio.paused);
};
// get ended
document.getelementbyid(get_ended).onclick=function(){
console.log(audio.ended: +audio.ended);
};
// set volume-
document.getelementbyid(volume_down).onclick=function(){
audio.volume-=0.2;
console.log(volume-0.2);
};
// set volume+
document.getelementbyid(volume_up).onclick=function(){
audio.volume+=0.2;
console.log(volume+0.2);
};
// get volume
document.getelementbyid(get_volume).onclick=function(){
console.log(audio.volume: +audio.volume);
};
// get src
document.getelementbyid(get_src).onclick=function(){
console.log(audio.src: +audio.src);
};
// set src_music1
document.getelementbyid(play_music1).onclick=function(){
audio.src=./media/music1.mp3;
updatesrc();
updatecurrentsrc();
console.log(play music1);
};
// set src_music2
document.getelementbyid(play_music2).onclick=function(){
audio.src=./media/music2.mp3;
updatesrc();
updatecurrentsrc();
console.log(play music2);
};
// set remove_music
document.getelementbyid(remove_music).onclick=function(){
audio.src=;
console.log(remove music);
};
// get currentsrc
document.getelementbyid(get_current_src).onclick=function(){
console.log(audio.currentsrc: +audio.currentsrc);
};
// get initialtime
document.getelementbyid(get_initial_time).onclick=function(){
console.log(audio.initialtime: +audio.initialtime);
};
// get duration
document.getelementbyid(get_duration).onclick=function(){
console.log(audio.duration: +audio.duration);
};
// get seeking
document.getelementbyid(get_seeking).onclick=function(){
console.log(audio.seeking: +audio.seeking);
};
// set currenttime
document.getelementbyid(jump_to).onclick=function(){
audio.currenttime=30;
console.log(jumpto 30s);
};
// get currenttime
document.getelementbyid(get_current_time).onclick=function(){
console.log(audio.currenttime: +audio.currenttime);
};
// get played
document.getelementbyid(get_played).onclick=function(){
console.log(audio.played:);
var ranges=audio.played;
var n=ranges.length;
for(var i=0;i console.log((+ranges.start(i)+,+ranges.end(i)+));
}
};
// autoplay on
document.getelementbyid(autoplay_on).onclick=function(){
audio.autoplay=true;
updateautoplay();
console.log(autoplay on);
};
// autoplay off
document.getelementbyid(autoplay_off).onclick=function(){
audio.autoplay=false;
updateautoplay();
console.log(autoplay off);
};
// get autoplay
document.getelementbyid(get_autoplay).onclick=function(){
console.log(audio.autoplay: +audio.autoplay);
};
// controls show
document.getelementbyid(controls_show).onclick=function(){
audio.controls=true;
updatecontrols();
console.log(controls show);
};
// controls hide
document.getelementbyid(controls_hide).onclick=function(){
audio.controls=false;
updatecontrols();
console.log(controls hide);
};
// get controls
document.getelementbyid(get_controls).onclick=function(){
console.log(audio.controls: +audio.controls);
};
// loop on
document.getelementbyid(loop_on).onclick=function(){
audio.loop=true;
updateloop();
console.log(loop on);
};
// loop off
document.getelementbyid(loop_off).onclick=function(){
audio.loop=false;
updateloop();
console.log(loop off);
};
// get loop
document.getelementbyid(get_loop).onclick=function(){
console.log(audio.loop: +audio.loop);
};
// preload metadata
document.getelementbyid(preload_metadata).onclick=function(){
audio.preload=metadata;
updatepreload();
console.log(preload metadata);
};
// get preload
document.getelementbyid(get_preload).onclick=function(){
console.log(audio.preload: +audio.preload);
};
// get defaultmuted
document.getelementbyid(get_default_muted).onclick=function(){
console.log(audio.defaultmuted: +audio.defaultmuted);
};
// mute
document.getelementbyid(mute).onclick=function(){
audio.muted=true;
updatemuted();
console.log(audio mute);
};
// unmute
document.getelementbyid(unmute).onclick=function(){
audio.muted=false;
updatemuted();
console.log(audio unmute);
};
// get muted
document.getelementbyid(get_muted).onclick=function(){
console.log(audio.muted: +audio.muted);
};
// get defaultplaybackrate
document.getelementbyid(get_default_playback_rate).onclick=function(){
console.log(audio.defaultplaybackrate: +audio.defaultplaybackrate);
};
// set playbackrate-
document.getelementbyid(playback_rate_down).onclick=function(){
audio.playbackrate-=0.2;
console.log(playbackrate-0.2);
};
// set playbackrate+
document.getelementbyid(playback_rate_up).onclick=function(){
audio.playbackrate+=0.2;
console.log(playbackrate+0.2);
};
// get playbackrate
document.getelementbyid(get_playback_rate).onclick=function(){
console.log(audio.playbackrate: +audio.playbackrate);
};
// get networkstate
document.getelementbyid(get_network_state).onclick=function(){
console.log(audio.networkstate: +audio.networkstate);
};
// get readystate
document.getelementbyid(get_ready_state).onclick=function(){
console.log(audio.readystate: +audio.readystate);
};
// get buffered
document.getelementbyid(get_buffered).onclick=function(){
console.log(audio.buffered:);
var ranges=audio.buffered;
var n=ranges.length;
for(var i=0;i console.log((+ranges.start(i)+,+ranges.end(i)+));
}
};
// get seekable
document.getelementbyid(get_seekable).onclick=function(){
console.log(audio.seekable:);
var ranges=audio.seekable;
var n=ranges.length;
for(var i=0;i console.log((+ranges.start(i)+,+ranges.end(i)+));
}
};
// dom events
// abort
audio.addeventlistener(abort,function(){
console.log(event:abort);
});
// canplay
audio.addeventlistener(canplay,function(){
console.log(event:canplay);
});
// canplaythrough
audio.addeventlistener(canplaythrough,function(){
console.log(event:canplaythrough);
});
// durationchange
audio.addeventlistener(durationchange,function(){
updateduration();
console.log(event:durationchange);
});
// emptied
audio.addeventlistener(emptied,function(){
updatesrc();
updatecurrentsrc();
updateduration();
updatepaused();
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
updateplayed();
console.log(event:emptied);
});
// ended
audio.addeventlistener(ended,function(){
updateended();
console.log(event:ended);
});
// loadeddata
audio.addeventlistener(loadeddata,function(){
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
console.log(event:loadeddata);
});
// loadedmetadata
audio.addeventlistener(loadedmetadata,function(){
console.log(event:loadedmetadata);
});
// loadstart
audio.addeventlistener(loadstart,function(){
console.log(event:loadstart);
});
// pause
audio.addeventlistener(pause,function(){
updatepaused();
console.log(event:pause);
});
// play
audio.addeventlistener(play,function(){
updatepaused();
console.log(event:play);
});
// playing
audio.addeventlistener(playing,function(){
console.log(event:playing);
});
// progress
audio.addeventlistener(progress,function(){
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
console.log(event:progress);
});
// ratechange
audio.addeventlistener(ratechange,function(){
updateplaybackrate();
console.log(event:ratechange);
});
// seeked
audio.addeventlistener(seeked,function(){
console.log(event:seeked);
});
// seeking
audio.addeventlistener(seeking,function(){
console.log(event:seeking);
});
// stalled
audio.addeventlistener(stalled,function(){
console.log(event:stalled);
});
// suspend
audio.addeventlistener(suspend,function(){
console.log(event:suspend);
});
// timeupdate
audio.addeventlistener(timeupdate,function(){
updatecurrenttime();
updateended();
updateplayed();
console.log(event:timeupdate);
});
// volumechange
audio.addeventlistener(volumechange,function(){
updatevolume();
console.log(event:volumechange);
});
// waiting
audio.addeventlistener(waiting,function(){
console.log(event:waiting);
});
updateautoplay();
updatecontrols();
updatedefaultmuted();
updatedefaultplaybackrate();
updateloop();
updatepreload();
updatesrc();
updatecurrentsrc();
updateduration();
updatecurrenttime();
updatevolume();
updatepaused();
updatemuted();
updateended();
updateplaybackrate();
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
updateplayed();
updateerror();
};
// functions to update info table
// autoplay
function updateautoplay(){
document.getelementbyid(autoplay).innerhtml=audio.autoplay;
}
// controls
function updatecontrols(){
document.getelementbyid(controls).innerhtml=audio.controls;
}
// defaultmuted
function updatedefaultmuted(){
document.getelementbyid(default_muted).innerhtml=audio.defaultmuted;
}
// defaultplaybackrate
function updatedefaultplaybackrate(){
document.getelementbyid(default_playback_rate).innerhtml=audio.defaultplaybackrate;
}
// loop
function updateloop(){
document.getelementbyid(loop).innerhtml=audio.loop;
}
// preload
function updatepreload(){
document.getelementbyid(preload).innerhtml=audio.preload;
}
// src
function updatesrc(){
document.getelementbyid(src).innerhtml=audio.src;
}
// currentsrc
function updatecurrentsrc(){
document.getelementbyid(current_src).innerhtml=audio.currentsrc;
}
// duration
function updateduration(){
document.getelementbyid(duration).innerhtml=audio.duration;
}
// currenttime
function updatecurrenttime(){
document.getelementbyid(current_time).innerhtml=audio.currenttime;
}
// ended
function updateended(){
document.getelementbyid(ended).innerhtml=audio.ended;
}
// paused
function updatepaused(){
document.getelementbyid(paused).innerhtml=audio.paused;
}
// muted
function updatemuted(){
document.getelementbyid(muted).innerhtml=audio.muted;
}
// volume
function updatevolume(){
document.getelementbyid(volume).innerhtml=audio.volume;
}
// playbackrate
function updateplaybackrate(){
document.getelementbyid(playback_rate).innerhtml=audio.playbackrate;
}
// networkstate
function updatenetworkstate(){
document.getelementbyid(network_state).innerhtml=audio.networkstate;
}
// readystate
function updatereadystate(){
document.getelementbyid(ready_state).innerhtml=audio.readystate;
}
// buffered
function updatebuffered(){
var ranges=audio.buffered;
var str=;
var n=ranges.length;
for(var i=0;i str+=(+ranges.start(i)+,+ranges.end(i)+);
if(i!=n-1){
str+=
;
}
}
document.getelementbyid(buffered).innerhtml=str;
}
// seekable
function updateseekable(){
var ranges=audio.seekable;
var str=;
var n=ranges.length;
for(var i=0;i str+=(+ranges.start(i)+,+ranges.end(i)+);
if(i!=n-1){
str+=
;
}
}
document.getelementbyid(seekable).innerhtml=str;
}
// played
function updateplayed(){
var ranges=audio.played;
var str=;
var n=ranges.length;
for(var i=0;i str+=(+ranges.start(i)+,+ranges.end(i)+);
if(i!=n-1){
str+=
;
}
}
document.getelementbyid(played).innerhtml=str;
}
// error
function updateerror(){
document.getelementbyid(error).innerhtml=audio.error;
}