https://www.hochi.org.tw/workingstyle/musicplayer.js

1function createTrackItem(index,name,duration){
2  var trackItem = document.createElement('div');
3  trackItem.setAttribute('class', 'playlist-track-ctn');
4  trackItem.setAttribute('id', 'ptc-'+index);
5  trackItem.setAttribute('data-index', index);
6  document.querySelector('.playlist-ctn').appendChild(trackItem);
7
8  var playBtnItem = document.createElement('div');
9  playBtnItem.setAttribute('class', 'playlist-btn-play');
10  playBtnItem.setAttribute('id', 'pbp-'+index);
11  document.querySelector('#ptc-'+index).appendChild(playBtnItem);
12
13  var btnImg = document.createElement('i');
14  btnImg.setAttribute('class', 'fas fa-play');
15  btnImg.setAttribute('height', '40');
16  btnImg.setAttribute('width', '40');
17  btnImg.setAttribute('id', 'p-img-'+index);
18  document.querySelector('#pbp-'+index).appendChild(btnImg);
19
20  var trackInfoItem = document.createElement('div');
21  trackInfoItem.setAttribute('class', 'playlist-info-track');
22  trackInfoItem.innerHTML = name
23  document.querySelector('#ptc-'+index).appendChild(trackInfoItem);
24
25  var trackDurationItem = document.createElement('div');
26  trackDurationItem.setAttribute('class', 'playlist-duration');
27  trackDurationItem.innerHTML = duration
28  document.querySelector('#ptc-'+index).appendChild(trackDurationItem);
29}
30
31//音檔內容放置區
32var listAudio = [
33  {
34    name:'大愛祝福心念',
35    file:'https://www.hochi.org.tw/wp-content/uploads/2023/03/Universal_Love_ch.mp3',
36    duration:'01:30'
37  },
38  {
39    name:'Universal Love Blessing',
40    file:'https://www.hochi.org.tw/wp-content/uploads/2023/03/UniversalLoveBlessing_en.mp3',
41    duration:'09:13'
42  },
43  {
44    name:'大愛祝福心念_唱誦版',
45    file:'https://www.hochi.org.tw/wp-content/uploads/2023/03/UniversalLove-sing.mp3',
46    duration:'05:37'
47  },
48  {
49    name:'大愛祝福心念_演奏版',
50    file:'https://www.hochi.org.tw/wp-content/uploads/2023/03/UniversalLove-music.mp3',
51    duration:'05:43'
52  }
53]
54
55for (var i = 0; i < listAudio.length; i++) {
56    createTrackItem(i,listAudio[i].name,listAudio[i].duration,i,listAudio[i]);
57}
58var indexAudio = 0;
59var list_loop = false;
60function loadNewTrack(index){
61  var player = document.querySelector('#source-audio')
62  player.src = listAudio[index].file
63  document.querySelector('.title').innerHTML = listAudio[index].name
64  this.currentAudio = document.getElementById('myAudio');
65  this.currentAudio.load()
66  this.toggleAudio()
67  this.updateStylePlaylist(this.indexAudio,index)
68  this.indexAudio = index;
69}
70
71var playListItems = document.querySelectorAll('.playlist-track-ctn');
72
73for (let i = 0; i < playListItems.length; i++){
74  playListItems[i].addEventListener('click', getClickedElement.bind(this));
75}
76
77function getClickedElement(event) {
78  for (let i = 0; i < playListItems.length; i++){
79    if(playListItems[i] == event.target){
80      var clickedIndex = event.target.getAttribute('data-index')
81      if (clickedIndex == this.indexAudio ) { // alert('Same audio');
82          this.toggleAudio()
83      }else{
84          loadNewTrack(clickedIndex);
85      }
86    }
87  }
88}
89
90document.querySelector('#source-audio').src = listAudio[indexAudio].file
91document.querySelector('.title').innerHTML = listAudio[indexAudio].name
92
93
94var currentAudio = document.getElementById('myAudio');
95
96currentAudio.load()
97
98currentAudio.onloadedmetadata = function() {
99      document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration)
100}.bind(this);
101
102var interval1;
103
104function toggleAudio() {
105
106  if (this.currentAudio.paused) {
107    document.querySelector('#icon-play').style.display = 'none';
108    document.querySelector('#icon-pause').style.display = 'block';
109    document.querySelector('#ptc-'+this.indexAudio).classList.add('active-track');
110    this.playToPause(this.indexAudio)
111    this.currentAudio.play();
112  }else{
113    document.querySelector('#icon-play').style.display = 'block';
114    document.querySelector('#icon-pause').style.display = 'none';
115    this.pauseToPlay(this.indexAudio)
116    this.currentAudio.pause();
117  }
118}
119
120function pauseAudio() {
121  this.currentAudio.pause();
122  clearInterval(interval1);
123}
124
125var timer = document.getElementsByClassName('timer')[0]
126
127var barProgress = document.getElementById('myBar');
128
129
130var width = 0;
131
132function onTimeUpdate() {
133  var t = this.currentAudio.currentTime
134  timer.innerHTML = this.getMinutes(t);
135  this.setBarProgress();
136  if (this.currentAudio.ended) {
137    document.querySelector('#icon-play').style.display = 'block';
138    document.querySelector('#icon-pause').style.display = 'none';
139    this.pauseToPlay(this.indexAudio)
140    if (this.indexAudio < listAudio.length-1) {
141        var index = parseInt(this.indexAudio)+1
142        this.loadNewTrack(index)
143    }else{
144			if(list_loop){
145				indexAudio = 0;
146				this.loadNewTrack(indexAudio)
147			}
148		}
149  }
150}
151var loop = false;

152
153function toggleLoop() {
154  loop = !loop;
155  var audio = document.getElementById('myAudio');
156  audio.loop = loop;
157  var iconLoop = document.getElementById('icon-loop');
158  var iconNoLoop = document.getElementById('icon-no-loop');
159  if (loop) {
160    iconLoop.style.display = 'none';
161    iconNoLoop.style.display = 'inline-block';
162  } else {
163    iconLoop.style.display = 'inline-block';
164    iconNoLoop.style.display = 'none';
165  }
166}
167function listLoop() {
168  list_loop = !list_loop;
169  var iconListLoop = document.getElementById('icon-listloop');
170  var iconNoListLoop = document.getElementById('icon-no-listloop');
171  if (list_loop) {
172    iconListLoop.style.display = 'none';
173    iconNoListLoop.style.display = 'inline-block';
174  } else {
175    iconListLoop.style.display = 'inline-block';
176    iconNoListLoop.style.display = 'none';
177  }
178}
179
180function setBarProgress(){
181  var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100;
182  document.getElementById('myBar').style.width = progress + '%';
183}
184
185
186function getMinutes(t){
187  var min = parseInt(parseInt(t)/60);
188  var sec = parseInt(t%60);
189  if (sec < 10) {
190    sec = '0'+sec
191  }
192  if (min < 10) {
193    min = '0'+min
194  }
195  return min+":"+sec
196}
197
198var progressbar = document.querySelector('#myProgress')
199progressbar.addEventListener('click', seek.bind(this));
200
201
202function seek(event) {
203  var percent = event.offsetX / progressbar.offsetWidth;
204  this.currentAudio.currentTime = percent * this.currentAudio.duration;
205  barProgress.style.width = percent*100 + '%';
206}
207
208function forward(){
209  this.currentAudio.currentTime = this.currentAudio.currentTime + 5
210  this.setBarProgress();
211}
212
213function rewind(){
214  this.currentAudio.currentTime = this.currentAudio.currentTime - 5
215  this.setBarProgress();
216}
217
218
219function next(){
220  if (this.indexAudio <listAudio.length-1) {
221      var oldIndex = this.indexAudio
222      this.indexAudio++;
223      updateStylePlaylist(oldIndex,this.indexAudio)
224      this.loadNewTrack(this.indexAudio);
225  }
226}
227
228function previous(){
229  if (this.indexAudio>0) {
230      var oldIndex = this.indexAudio
231      this.indexAudio--;
232      updateStylePlaylist(oldIndex,this.indexAudio)
233      this.loadNewTrack(this.indexAudio);
234  }
235}
236
237function updateStylePlaylist(oldIndex,newIndex){
238  document.querySelector('#ptc-'+oldIndex).classList.remove("active-track");
239  this.pauseToPlay(oldIndex);
240  document.querySelector('#ptc-'+newIndex).classList.add("active-track");
241  this.playToPause(newIndex)
242}
243
244function playToPause(index){
245  var ele = document.querySelector('#p-img-'+index)
246  ele.classList.remove("fa-play");
247  ele.classList.add("fa-pause");
248}
249
250function pauseToPlay(index){
251  var ele = document.querySelector('#p-img-'+index)
252  ele.classList.remove("fa-pause");
253  ele.classList.add("fa-play");
254}
255
256
257function toggleMute(){
258  var btnMute = document.querySelector('#toggleMute');
259  var volUp = document.querySelector('#icon-vol-up');
260  var volMute = document.querySelector('#icon-vol-mute');
261  if (this.currentAudio.muted == false) {
262     this.currentAudio.muted = true
263     volUp.style.display = "none"
264     volMute.style.display = "block"
265  }else{
266    this.currentAudio.muted = false
267    volMute.style.display = "none"
268    volUp.style.display = "block"
269  }
270}