Music album web page generator
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 
 

173 righe
6.1 KiB

  1. export default class DedePlayer{
  2. constructor(container){
  3. this.currentAudio = null;
  4. this.playing = false;
  5. this.playerContainer = document.createElement("div");
  6. this.container = container;
  7. this.playerContainer.classList.add('dd-player');
  8. this.switcher = document.createElement("div");
  9. this.switcher.classList.add('dd-player-switch');
  10. this.playerContainer.classList.add('collapsed');
  11. //document.body.appendChild(this.container);
  12. document.body.appendChild(this.switcher);
  13. this.switcher.addEventListener('click', event => {
  14. this.playerContainer.classList.toggle('collapsed');
  15. this.switcher.classList.toggle('opened');
  16. });
  17. let title = document.createElement("h3");
  18. //title.innerHTML = playList.title;
  19. title.appendChild(document.createTextNode(this.container.dataset.title));
  20. this.addProgressBar();
  21. // this.container.appendChild(title);
  22. this.bindAudioTags();
  23. this.addPlayButton();
  24. //console.log(Math.floor(this.currentAudio.duration));
  25. // let playerLinks = document.querySelectorAll('.dd-player-link');
  26. // let self = this;
  27. // playerLinks.forEach(function(pl){
  28. // pl.addEventListener('click', (e) => {
  29. // self.container.classList.toggle('collapsed');
  30. // self.switcher.classList.toggle('opened');
  31. // })
  32. // });
  33. let wrap = document.createElement("div");
  34. wrap.setAttribute('id', 'wrap-playlist')
  35. this.container.parentElement.appendChild(this.playerContainer);
  36. this.playerContainer.appendChild(title);
  37. this.playerContainer.appendChild(wrap);
  38. wrap.appendChild(this.container);
  39. };
  40. addProgressBar(){
  41. this.progressBar = document.createElement("progress");
  42. this.progressBar.setAttribute('value', 0);
  43. this.startTimeInfo = document.createElement('div');
  44. this.endTimeInfo = document.createElement('div');
  45. let progressWrap = document.createElement("div");
  46. this.startTimeInfo.innerHTML = "00:00";
  47. this.endTimeInfo.innerHTML = "00:00";
  48. progressWrap.appendChild(this.startTimeInfo);
  49. progressWrap.appendChild(this.progressBar);
  50. progressWrap.appendChild(this.endTimeInfo);
  51. this.startTimeInfo.classList.add('time-info');
  52. this.endTimeInfo.classList.add('time-info');
  53. progressWrap.classList.add('progress-wrap');
  54. this.playerContainer.append(progressWrap);
  55. let self = this;
  56. this.progressBar.addEventListener('click', (e) => {
  57. if(self.currentAudio){
  58. self.currentAudio.currentTime = Math.floor(((e.layerX - self.progressBar.offsetLeft) * self.currentAudio.duration) / self.progressBar.offsetWidth);
  59. self.progressBar.value = Math.floor(self.currentAudio.currentTime );
  60. }
  61. });
  62. }
  63. addPlayButton(){
  64. this.playButton = document.createElement("img");
  65. this.playButton.setAttribute('src','assets/images/play.png');
  66. this.playButton.setAttribute('id','play-button');
  67. let wrap = document.createElement("div");
  68. wrap.append(this.playButton);
  69. this.container.append(wrap);
  70. let self = this;
  71. this.playButton.addEventListener('click', event => {
  72. self.playing = !self.playing;
  73. if(self.playing){
  74. self.currentAudio.play();
  75. self.currentAudio.parentElement.classList.add('playing');
  76. self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
  77. self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
  78. this.playButton.setAttribute('src','assets/images/pause.png');
  79. }
  80. else{
  81. self.currentAudio.pause();
  82. self.currentAudio.parentElement.classList.remove('playing');
  83. this.playButton.setAttribute('src','assets/images/play.png');
  84. }
  85. })
  86. }
  87. bindAudioTags(){
  88. //let listElement = document.createElement("ul");
  89. let liTags = this.container.querySelectorAll('li')
  90. let self = this;
  91. let i = 0;
  92. liTags.forEach(function(itemElement){
  93. // //let playBtn = document.createElement("img");
  94. // //playBtn.setAttribute('src','images/icons/play.png');
  95. // let itemElement = document.createElement("li");
  96. // //itemElement.appendChild(playBtn);
  97. // itemElement.appendChild(document.createTextNode(track.title));
  98. // listElement.appendChild(itemElement);
  99. // let audioElement = document.createElement('audio');
  100. // audioElement.setAttribute('src',track.src);
  101. let audioTag = itemElement.querySelector('audio')
  102. audioTag.addEventListener('timeupdate', (event) => {
  103. self.audioTimeUpdate(audioTag);
  104. });
  105. audioTag.addEventListener('ended', (event) => {
  106. self.audioEnded(i);
  107. })
  108. //itemElement.appendChild(audioElement);
  109. audioTag.setAttribute('id','track-'+i);
  110. if(i === 0)
  111. self.currentAudio = audioTag;
  112. itemElement.addEventListener('click', event => {
  113. let items = self.container.getElementsByTagName('li');
  114. for(let i = 0; i < items.length; i++){
  115. items[i].classList.remove('playing');
  116. }
  117. if(self.currentAudio)
  118. self.currentAudio.pause();
  119. audioTag.play();
  120. self.playButton.setAttribute('src','assets/images/pause.png');
  121. self.playing = true;
  122. itemElement.classList.add('playing');
  123. self.currentAudio = audioTag;
  124. self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
  125. self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
  126. self.progressBar.setAttribute('value', 0);
  127. });
  128. i++;
  129. });
  130. }
  131. audioTimeUpdate(audioElt){
  132. this.progressBar.value = Math.floor(audioElt.currentTime);
  133. this.startTimeInfo.innerHTML = this.formatDuration(audioElt.currentTime);
  134. }
  135. audioEnded(n){
  136. let audios = document.getElementsByTagName('audio');
  137. let next = n == audios.length - 1 ? 0 : n + 1;
  138. this.currentAudio.pause();
  139. this.currentAudio.currentTime = 0;
  140. this.currentAudio = document.getElementsByTagName('audio')[next];
  141. this.currentAudio.parentElement.click();
  142. }
  143. formatDuration(time){
  144. let s = parseInt(time% 60);
  145. let m = parseInt((time / 60) % 60);
  146. return (m < 10 ? ('0'+m) : m) + ':' + (s < 10 ? ('0'+s) : s);
  147. }
  148. }