|
- export default class DedePlayer{
-
- constructor(container){
- this.currentAudio = null;
- this.playing = false;
- this.playerContainer = document.createElement("div");
- this.container = container;
- this.playerContainer.classList.add('dd-player');
- this.switcher = document.createElement("div");
- this.switcher.classList.add('dd-player-switch');
- this.playerContainer.classList.add('collapsed');
- //document.body.appendChild(this.container);
- document.body.appendChild(this.switcher);
-
- this.switcher.addEventListener('click', event => {
- this.playerContainer.classList.toggle('collapsed');
- this.switcher.classList.toggle('opened');
- });
-
- let title = document.createElement("h3");
- //title.innerHTML = playList.title;
- title.appendChild(document.createTextNode(this.container.dataset.title));
-
- this.addProgressBar();
- // this.container.appendChild(title);
- this.bindAudioTags();
- this.addPlayButton();
- //console.log(Math.floor(this.currentAudio.duration));
-
- // let playerLinks = document.querySelectorAll('.dd-player-link');
- // let self = this;
- // playerLinks.forEach(function(pl){
- // pl.addEventListener('click', (e) => {
- // self.container.classList.toggle('collapsed');
- // self.switcher.classList.toggle('opened');
- // })
- // });
-
- let wrap = document.createElement("div");
- wrap.setAttribute('id', 'wrap-playlist')
- this.container.parentElement.appendChild(this.playerContainer);
- this.playerContainer.appendChild(title);
- this.playerContainer.appendChild(wrap);
- wrap.appendChild(this.container);
-
- };
-
- addProgressBar(){
- this.progressBar = document.createElement("progress");
- this.progressBar.setAttribute('value', 0);
- this.startTimeInfo = document.createElement('div');
- this.endTimeInfo = document.createElement('div');
- let progressWrap = document.createElement("div");
- this.startTimeInfo.innerHTML = "00:00";
- this.endTimeInfo.innerHTML = "00:00";
- progressWrap.appendChild(this.startTimeInfo);
- progressWrap.appendChild(this.progressBar);
- progressWrap.appendChild(this.endTimeInfo);
- this.startTimeInfo.classList.add('time-info');
- this.endTimeInfo.classList.add('time-info');
- progressWrap.classList.add('progress-wrap');
- this.playerContainer.append(progressWrap);
- let self = this;
- this.progressBar.addEventListener('click', (e) => {
- if(self.currentAudio){
- self.currentAudio.currentTime = Math.floor(((e.layerX - self.progressBar.offsetLeft) * self.currentAudio.duration) / self.progressBar.offsetWidth);
- self.progressBar.value = Math.floor(self.currentAudio.currentTime );
- }
- });
-
-
- }
-
-
- addPlayButton(){
- this.playButton = document.createElement("img");
- this.playButton.setAttribute('src','assets/images/play.png');
- this.playButton.setAttribute('id','play-button');
- let wrap = document.createElement("div");
- wrap.append(this.playButton);
- this.container.append(wrap);
- let self = this;
- this.playButton.addEventListener('click', event => {
- self.playing = !self.playing;
- if(self.playing){
- self.currentAudio.play();
- self.currentAudio.parentElement.classList.add('playing');
- self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
- self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
- this.playButton.setAttribute('src','assets/images/pause.png');
- }
- else{
- self.currentAudio.pause();
- self.currentAudio.parentElement.classList.remove('playing');
- this.playButton.setAttribute('src','assets/images/play.png');
- }
- })
- }
-
- bindAudioTags(){
- //let listElement = document.createElement("ul");
- let liTags = this.container.querySelectorAll('li')
- let self = this;
- let i = 0;
- liTags.forEach(function(itemElement){
- // //let playBtn = document.createElement("img");
- // //playBtn.setAttribute('src','images/icons/play.png');
- // let itemElement = document.createElement("li");
- // //itemElement.appendChild(playBtn);
- // itemElement.appendChild(document.createTextNode(track.title));
- // listElement.appendChild(itemElement);
- // let audioElement = document.createElement('audio');
- // audioElement.setAttribute('src',track.src);
- let audioTag = itemElement.querySelector('audio')
-
- audioTag.addEventListener('timeupdate', (event) => {
- self.audioTimeUpdate(audioTag);
- });
- audioTag.addEventListener('ended', (event) => {
- self.audioEnded(i);
- })
-
- //itemElement.appendChild(audioElement);
- audioTag.setAttribute('id','track-'+i);
- if(i === 0)
- self.currentAudio = audioTag;
- itemElement.addEventListener('click', event => {
- let items = self.container.getElementsByTagName('li');
- for(let i = 0; i < items.length; i++){
- items[i].classList.remove('playing');
- }
- if(self.currentAudio)
- self.currentAudio.pause();
- audioTag.play();
- self.playButton.setAttribute('src','assets/images/pause.png');
- self.playing = true;
- itemElement.classList.add('playing');
- self.currentAudio = audioTag;
- self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
- self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
- self.progressBar.setAttribute('value', 0);
- });
-
- i++;
-
- });
-
-
-
- }
-
- audioTimeUpdate(audioElt){
- this.progressBar.value = Math.floor(audioElt.currentTime);
- this.startTimeInfo.innerHTML = this.formatDuration(audioElt.currentTime);
- }
-
- audioEnded(n){
- let audios = document.getElementsByTagName('audio');
- let next = n == audios.length - 1 ? 0 : n + 1;
- this.currentAudio.pause();
- this.currentAudio.currentTime = 0;
- this.currentAudio = document.getElementsByTagName('audio')[next];
- this.currentAudio.parentElement.click();
- }
-
- formatDuration(time){
- let s = parseInt(time% 60);
- let m = parseInt((time / 60) % 60);
- return (m < 10 ? ('0'+m) : m) + ':' + (s < 10 ? ('0'+s) : s);
- }
-
-
- }
|