Music album web page generator
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 
 

61 satır
1.9 KiB

  1. var current = undefined
  2. const progressMargin = 50;
  3. var progress = undefined;
  4. window.addEventListener('DOMContentLoaded', (event) => {
  5. progress = document.getElementById('player-progress');
  6. document.getElementById('player-progress').addEventListener('click', (e) => {
  7. if(current){
  8. let media = current.getElementsByTagName('audio')[0];
  9. media.currentTime = e.layerX * media.duration / progress.offsetWidth;
  10. }
  11. });
  12. let toggler = document.getElementById('player-toggler');
  13. toggler.setAttribute('title','afficher/masquer la liste des morceaux');
  14. toggler.addEventListener('click', (e) => {
  15. document.getElementsByTagName('ul')[0].classList.toggle('invisible');
  16. })
  17. });
  18. function togglePlay(src) {
  19. let media = src.getElementsByTagName('audio')[0];
  20. let icon = src.getElementsByTagName('img')[0];
  21. if (current){//stops current media and reset its play icon
  22. pause();
  23. }
  24. if(current != src){
  25. //sets current media icon and plays media
  26. icon.setAttribute('src','assets/pause.png');
  27. media.play();
  28. progress.max = Math.floor(media.duration);
  29. current = src;
  30. document.getElementById('time-info').style.visibility = 'visible';
  31. }
  32. else{
  33. current = undefined;
  34. }
  35. }
  36. function pause(){
  37. current.getElementsByTagName('audio')[0].pause();
  38. current.getElementsByTagName('img')[0].setAttribute('src','assets/play.png');
  39. document.getElementById('time-info').style.visibility = 'hidden';
  40. }
  41. function updateProgress(media){
  42. progress.value = Math.floor(media.currentTime);
  43. document.getElementById('time-info').innerHTML =
  44. prettyDuration(media.currentTime) + ' / ' + prettyDuration(media.duration);
  45. }
  46. function prettyDuration(duration) {
  47. let sec = Math.floor( duration );
  48. let min = Math.floor( sec / 60 );
  49. min = min >= 10 ? min : '0' + min;
  50. sec = Math.floor( sec % 60 );
  51. sec = sec >= 10 ? sec : '0' + sec;
  52. return min + ':' + sec;
  53. }