这是一个关于media的播放器模块化控制,用于个人iceplayer播放器
花了一定的时间解决了之前碰到的关于播放器的问题,目前在开发一个html5播放器。
播放器将基于bootstrap metro UI css 和angularjs,此模块是在angular控制器中用于控制音乐播放的模块。
开头的方法列表并没完全写入所有的方法,在下面可以自己增加或删除,在这里面的lrc仅限读取和设置,lrc的实时播放将会被列入一个单独的模块。
/**
* media控制器
* @author icepro
* @Time 2016-3-10 11:13:55
* @return setMedia 设置media元素
* @return playList 播放列表
* @return className 类名
* @return play 播放
* @return pause 暂停
* @return setSrc 设置文件路径
* @return getSrc 获得文件路径
* @return newMusic 依照url开始新音乐
* @return setMedia 设置media元素
* @return getMedia 获取media元素
* @return playNext 播放下一首
* @return setCurrentTime 设置当前播放时间
* @return getCurrentTime 获得当前播放时间
* @return getDuration 获得歌曲完整长度
* @return setLrc 设置当前歌词的lrc
*/
function mediaContol(){
// 生成一个audio
var media = new Audio();
var indexOfList = 0,
played = false,
playing = false,
playList = new Array(),
className = "mediaControl",
theNext = false,
bt_play = true,
duration=0,
currentTime=0,
lrc="";
// 特殊情况下需要返回自己
var getMediaContol = function(){
return this;
}
// 获取media元素
var getMedia = function (){
return media;
}
// 播放
var play = function(){
if(this.playList.length==0){
console.log("no music loaded");
return false;
}
if((!media.paused)|(!played)|theNext){
setSrc(this.playList[indexOfList]);
theNext = !theNext;
}
// 设置当前播放状态
playing = true;
// 设置是否已经加载过src
played = true;
// 设置按钮为pause
bt_play = false;
media.play();
}
// 暂停
var pause = function(){
bt_play = true;
media.pause();
}
// 获得当前播放按钮是否为play
var getBt_play = function(){
return bt_play;
}
// 获得是否为播放状态
var isPlaying = function(){
return playing;
}
// 设置歌曲完整长度
var setDuration = function(){
duration = media.duration == NaN ? 0 :media.duration;
}
// 获得歌曲完整长度
var getDuration = function(){
return duration;
}
// 获取当前时间
var getCurrentTime = function(){
return parseInt(media.currentTime);
}
// 设置当前时间
var setCurrentTime = function(time){
media.currentTime = time;
}
// 以百分比获取当前时间
var getCurrentTimeByPercent = function(){
return (Math.round(media.currentTime / media.duration * 10000) / 100.00 + "%");
}
// 停止
var stop = function(){
// 设置当前播放状态
playing = false ;
media.stop();
}
// 设置播放
var setSrc = function(url){
media.src=url;
}
// 获得播放
var getSrc = function(){
return media.src;
}
// 开始新曲目
var newMusic = function(index){
indexOfList= index > this.playList.length-1 ? 0 : index;
theNext = true;
this.play();
}
// 下一首
var playNext =function(){
if(this.playList.length!=0){
indexOfList = (indexOfList == this.playList.length-1)?0:indexOfList + 1;
theNext = true;
this.play();
}else{
console.log("no music loaded");
}
}
// 设置当前歌词的lrc
var setLrc = function(lrcs){
lrc = lrcs;
}
return {
isPlaying:isPlaying,
indexOfList:indexOfList,
stop:stop,
getBt_play:getBt_play,
playList:playList,
className:className,
play:play,
pause:pause,
setSrc:setSrc,
getSrc:getSrc,
newMusic:newMusic,
getMedia:getMedia,
playNext:playNext,
setCurrentTime:setCurrentTime,
getCurrentTime:getCurrentTime,
setDuration:setDuration,
getDuration:getDuration,
getCurrentTimeByPercent:getCurrentTimeByPercent,
setLrc:setLrc,
}
}
本文标题:media的使用
永久链接:https://iceprosurface.com/2016/03/15/2016/2016-03-15-media-control/
作者授权:本文由 icepro 原创编译并授权刊载发布。
版权声明:本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议。