долго не грузиться audio

109
17 декабря 2021, 00:40

Вот мой код:

 let audio = document.getElementById("audio");
    let progress = document.getElementById("progress");

    let playImage = document.getElementsByClassName("playImage")[0];
    audio.ontimeupdate = progressUpdate;
   //ontimeupdate - Когда текущая позиция воспроизведения изменилась.
   progress.onclick = audioRewind;
    let timeN = document.getElementsByClassName("timeN")[0];
    let timeA = document.getElementsByClassName("timeA")[0];
   var musicSrc = [" https://www.mboxdrive.com/AViVA_GRRRLS__(44outdoors.com).mp3",
  " https://www.mboxdrive.com/alle-farben-bad-ideas-(mp3crazy.me).mp3", 
   "https://www.mboxdrive.com/Blvmenkind - Dream With You (feat. Sam Darton).mp3", 
   " https://www.mboxdrive.com/G-Eazy - But A Dream (Vanic Remix).mp3", 
   "https://www.mboxdrive.com/Samurah - Freak's Symphony.mp3",
    "https://www.mboxdrive.com/▼▲ VSN7 - Overcome.mp3",
    "https://www.mboxdrive.com/San Holo - They Just Haven't Seen It (feat. The Nicholas) [Official Music Video].mp3",
    "https://www.mboxdrive.com/Fischerspooner - Never Win (Benny Benassi remix).mp3",
    "https://www.mboxdrive.com/Kush Kush – Fight Back With Love Tonight [Official Video].mp3",
    "https://www.mboxdrive.com/Swanky Tunes - Fix Me (Video HD).mp3",
    "https://www.mboxdrive.com/Unzam - Me Too.mp3",
    "https://www.mboxdrive.com/skeler x Ytho - Final Call [Yusoul Vol 2].mp3",
    "https://www.mboxdrive.com/y2mate.com - lorn_acid_rain_official_music_video_nxg4C365LbQ_320kbps.mp3"]; //Прямые ссылки на музыку
  var number = 0;
   function play(){
        let playPromise = audio.play();
       if (playPromise !== undefined) {
           /*Error  The play() request was interrupted by a call to pause()*/
            playPromise.then(_ => {
                if(playImage.src == "https://i.pinimg.com/originals/9b/20/ba/9b20bae91190d4e1d5383270f465a7c8.png"){//Когда картинка play
             audio.play();
            playImage.src = "https://i.pinimg.com/originals/49/c6/d2/49c6d26e53d6c5333f2b177f874ac57f.png";//Картинка pause
                }
                else{
                    audio.pause();
            playImage.src = "https://i.pinimg.com/originals/9b/20/ba/9b20bae91190d4e1d5383270f465a7c8.png";//Картинка play
                }
            })
         .catch(error => {
           audio.pause();
          });
          }
       }
 function speedUp(){
        timeN.innerHTML = "0:00";
        number++;
        if(number >= musicSrc.length){
            number = 0;
        }
        audio.src = musicSrc[number];
        var playPromise = audio.play();
        /*Error  The play() request was interrupted by a call to pause()*/
        if (playPromise !== undefined) {
            playPromise.then(_ => {
             audio.play(); 
              playImage.src = "https://i.pinimg.com/originals/49/c6/d2/49c6d26e53d6c5333f2b177f874ac57f.png";//Картинка pause
           })
        .catch(error => {
          audio.pause();
          playImage.src = "https://i.pinimg.com/originals/9b/20/ba/9b20bae91190d4e1d5383270f465a7c8.png";//Картинка play
          });
          }
      }
    function speedDown(){
         number--;
        if(number < 0){
            number = musicSrc.length-1;
        }
        audio.src = musicSrc[number];
       let playPromise = audio.play();
         if (playPromise !== undefined) {
        playPromise.then(_ => {
         audio.play();
         playImage.src = "https://i.pinimg.com/originals/49/c6/d2/49c6d26e53d6c5333f2b177f874ac57f.png";//Картинка pause
         })
         .catch(error => {
          audio.pause();
            playImage.src = "https://i.pinimg.com/originals/9b/20/ba/9b20bae91190d4e1d5383270f465a7c8.png";//Картинка play

          });
          }
    }
   function progressUpdate(){
        let d = audio.duration;//Получить длину аудио
        let c = audio.currentTime;// устанавливает или возвращает текущую позицию времени воспроизведения медиа файла
        if(c > 0){
        progress.value = (100 * c) / d;
        var mins = Math.floor(audio.currentTime / 60);
        var secs = Math.floor(audio.currentTime % 60);
        if (secs < 10) {
           secs = '0' + String(secs);
         }
            timeN.innerHTML = 
            mins + ':' + secs;
         }

    }
      function audioRewind(){
        let c = audio.currentTime;
       if(c > 0){

        let w = this.offsetWidth;
        let o = event.offsetX;
        this.value = 100 * o/w;
        audio.pause();
       audio.currentTime = audio.duration * (o/w);
       playImage.src == "https://i.pinimg.com/originals/9b/20/ba/9b20bae91190d4e1d5383270f465a7c8.png"/*Картинка play*/ ? audio.pause() : audio.play();
    }
    }
    audio.onended = function() {
        number++;
        if(number >= musicSrc.length){
            number = 0;
        }
        audio.src = musicSrc[number];

       audio.play();
       playImage.src = "https://i.pinimg.com/originals/49/c6/d2/49c6d26e53d6c5333f2b177f874ac57f.png";//Картинка pause

   }
  audio.onloadedmetadata = function() {
             var mins = Math.floor(audio.duration / 60);
             var secs = Math.floor(audio.duration % 60);
                if (secs < 10) {
                  secs = '0' + String(secs);
                }
                 timeA.innerHTML = mins + ':' + secs;
          }

 <div class="timeN">0:00</div><div class="timeA">0:00</div>
      <audio src=" https://www.mboxdrive.com/AViVA_GRRRLS__(44outdoors.com).mp3" id="audio" preload="metadata"></audio>
        <progress id="progress" max="100" value="0" style="width: 100%; margin: 0 auto;"></progress>

         <button id="speed-down" onclick="speedDown()"><img src="https://i.pinimg.com/originals/8f/bd/56/8fbd567c18558c9f738005e3b111dd1f.png" alt="" width="25px" class="next"/></button>
        <button id="play" onclick="play()"><img src="https://i.pinimg.com/originals/9b/20/ba/9b20bae91190d4e1d5383270f465a7c8.png" width="28px" class="playImage"/></button>
        <button id="speed-up" onclick="speedUp()"><img src="https://i.pinimg.com/originals/0b/d7/81/0bd78177b012bdd36fa84b325defe42c.png" alt="" width="25px" class="prev"/></button>

Это небольшой mp3 player с музыкой и прямой ссылкой на неё. Если этот код запутсить на компе то всё будет хорошо, но я этот код пишу для телефона и, когда на нём выполняешь этот код, то примерно после 3 трека песня останавливаеться на пару секунд, может и на больше и, после этого когда ты дальше переключешь песни они дальше заедают. Код я сократил максимально, вопрос в том, почему примерно после 3 песни когда ты переключаешь трек они перед началом начинают заедать? Может в чем-то не ясно объяснил, за это извиняюсь, спрашивайте если что.

Answer 1

jPlayer в помощь и нет проблем.

READ ALSO
Нестандартная навигация слайдера

Нестандартная навигация слайдера

Есть много слайдеров как ниже

164
Chrome Extension передача сообщений

Chrome Extension передача сообщений

Столкнулся с еще одной проблемой при передаче сообщения (chromeruntime

94
Перебор Map со счетчиком итераций

Перебор Map со счетчиком итераций

Есть экземпляр Map, например

67
Ссылка при попытке ухода с сайта

Ссылка при попытке ухода с сайта

Я часто видел, что при попытке навести на крестик, сайт что-то предлагаетКак это реализовано?

221