[Js]media的使用


| 发布于:2016-03-15

这是一个关于media的播放器模块化控制,用于个人iceplayer播放器

花了一定的时间解决了之前碰到的关于播放器的问题,目前在开发一个html5播放器,基于bootstrap metro UI css 和angularjs,此模块是在angular控制器中用于控制音乐播放的模块,开头的方法列表并没完全写入所有的方法,在下面可以自己增加或删除,在这里面的lrc仅限读取和设置,lrc的实时播放将会被列入一个单独的模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/**
* 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,
  }
  
}