Вот мой код:
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 песни когда ты переключаешь трек они перед началом начинают заедать? Может в чем-то не ясно объяснил, за это извиняюсь, спрашивайте если что.
jPlayer в помощь и нет проблем.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Столкнулся с еще одной проблемой при передаче сообщения (chromeruntime
Я часто видел, что при попытке навести на крестик, сайт что-то предлагаетКак это реализовано?