Показать сообщение отдельно
  #1 (permalink)  
Старый 11.05.2021, 14:07
Аспирант
Отправить личное сообщение для Игорь №111111111111111111 Посмотреть профиль Найти все сообщения от Игорь №111111111111111111
 
Регистрация: 19.01.2020
Сообщений: 34

Кнопка next и prev в jQuery
Не могу сделать чтоб при нажатии на кнопку, mplayer__prev и mplayer__next происходило переключение между mp3 треками.
Как можно реализовать?
<div class="mplayer__toolbar">
            <div class="mplayer__prev"></div>
            <div class="mplayer__pause"></div>
            <div class="mplayer__next"></div>
        </div>


var PLAYER,
    PLAYLIST = [],
    SHUFFLE = false,
    REPEAT = false,
    CURRENT = 0;
 
 
function rewind() {
    var rewindStart = false,
        center,
        a,
        b,
        deg,
        degToPer,
        position;
 
    $('.player').mousedown(function (e) {
        e.preventDefault();
        rewindStart = true;
    });
 
    $('.player').mousemove(function (e) {
        if (rewindStart) {
            var offset = $('.player').offset();
            center = {
                top: offset.top + $('.player').outerHeight() / 2,
                left: offset.left + $('.player').outerWidth() / 2
            };
 
            a = center.left - e.pageX;
            b = center.top - e.pageY;
 
            deg = Math.atan2(a, b) * 180 / Math.PI;
 
            if (deg < 0) {
                deg = 360 + deg;
            }
 
            degToPer = 100 * (360 - deg) / 360;
            position = PLAYER.duration * degToPer / 100;
 
            PLAYER.currentTime = position;
        }
    });
 
    $(document).mouseup(function () {
        rewindStart = false;
    });
}
 
 
 
function notify(message) {
    if (!window.webkitNotifications) {
        return false;
    }
    if (window.webkitNotifications.checkPermission() === 0) {
        var notification = window.webkitNotifications.createNotification('', 'Round Player', message);
        notification.show();
        setTimeout(function () {
            notification.cancel();
        }, 5000);
    } else {
        window.webkitNotifications.requestPermission();
    }
}
 
 
 
function songName(file) {
    return file.webkitRelativePath.replace(/\//g, ' - ').replace('.mp3', '');
}
 
 
function collapsePlayer() {
    var mousePosition = {},
        mousePositionOld = {},
        t;
 
    $(document).mousemove(function (e) {
        mousePosition.x = e.pageX;
        mousePosition.y = e.pageY;
    });
 
    t = setInterval(function () {
        if (mousePosition.x == mousePositionOld.x && mousePositionOld.y == mousePositionOld.y) {
            $('.playlist-holder').hide();
            $('.volume-holder').hide();
        } else {
            mousePosition.x = mousePositionOld.x;
            mousePosition.y = mousePositionOld.y;
        }
    }, 5000);
}
 
 
function progress(percent) {
    var angle = percent * 360 / 100;
 
    $('.spinner').css('-webkit-transform', 'rotate(' + angle + 'deg)');
    if (percent > 50) {
        $('.filler').css('opacity', '1');
        $('.mask').css('opacity', '0');
    } else {
        $('.filler').css('opacity', '0');
        $('.mask').css('opacity', '1');
    }
}
 
 
 
function loadSong(id) {
    var file = PLAYLIST[id],
        url = window.webkitURL.createObjectURL(file);
 
    PLAYER.setAttribute('src', url);
    $('.playlist li').removeClass('active');
    $('.playlist li:nth-child(' + (parseInt(id) + 1) + ')').addClass('active');
 
    notify(songName(file));
}
 
 
 
function play() {
    PLAYER.play();
    $('.icon-play').hide();
    $('.icon-pause').show();
}
 
 
 
function pause() {
    PLAYER.pause();
    $('.icon-play').show();
    $('.icon-pause').hide();
}
 
 
 
function mute() {
    $('#mute').removeClass('normal').addClass('mute');
}
 
 
function unmute() {
    $('#mute').removeClass('mute').addClass('normal');
}
 
 
function isInputDirSupported() {
    var tmpInput = document.createElement('input');
    if ('webkitdirectory' in tmpInput) {
        return true;
    }
    return false;
}
 
 
$(document).ready(function () {
 
    if (!isInputDirSupported()) {
        $('.player-holder').hide();
        $('.not-supported').show();
        return false;
    }
 
    PLAYER = $('#player').get(0);
 
    PLAYER.volume = '0.8';
 
    $('.action').toggle(function (e) {
        play();
    }, function (e) {
        pause();
    });
 
    $('.action').hover(function () {
        $('.controls').addClass('active');
    });
 
    $('.volume-show').click(function () {
        $('.volume-holder').show();
    });
 
    $('#volume').change(function () {
        PLAYER.volume = $(this).val();
        $(this).data('val', $(this).val());
        if (player.volume === 0) {
            mute();
        } else {
            unmute();
        }
    });
 
    $('#mute').click(function () {
        if (PLAYER.volume === 0) {
            unmute();
            var previousVolume = $('#volume').data('val');
            if (previousVolume == 0 || !previousVolume) {
                $('#volume').data('val', '0.8');
            }
            PLAYER.volume = $('#volume').data('val');
            $('#volume').val(PLAYER.volume);
        } else {
            mute();
            $('#volume').val(0);
            PLAYER.volume = 0;
        }
    });
 
    $('.playlist-show').click(function () {
        $('.playlist-holder').show();
    });
 
    PLAYER.addEventListener('timeupdate', function (evt) {
        var played = PLAYER.currentTime / PLAYER.duration * 100;
        $('#played').css('width', played + '%');
        $('#position').val(played);
        progress(played);
    });
 
    PLAYER.addEventListener('progress', function (evt) {
        try {
            var loaded = PLAYER.buffered.end(0) / PLAYER.duration * 100;
            $('#loaded').css('width', loaded + '%');
        } catch (e) {
            console.log('buffer error');
        }
    });
 
    PLAYER.addEventListener('ended', function (evt) {
 
        pause();
 
        if (SHUFFLE) {
            CURRENT = parseInt(Math.random() * PLAYLIST.length + 1);
        } else {
            CURRENT++;
        }
        if (CURRENT >= PLAYLIST.length) {
            CURRENT = 0;
        }
 
        loadSong(CURRENT);
        play();
 
    });
 
    $('#fileInput').change(function (e) {
        var files = e.target.files,
            text = '',
            li = '',
            count = 0,
            i;
 
        $('.playlist').html('');
 
        PLAYLIST = [];
 
        for (i in files) {
            if (files[i].name && files[i].name.indexOf('mp3') != -1) {
                text = songName(files[i]);
                li = $('<li />').data('id', count).text(text);
                $('.playlist').append(li);
                PLAYLIST.push(files[i]);
                count++;
            }
        }
 
        loadSong(0);
        play();
 
    });
 
    $('.shuffle').toggle(function () {
        SHUFFLE = true;
        $(this).addClass('active');
    }, function () {
        SHUFFLE = false;
        $(this).removeClass('active');
    });
 
    $('.repeat').toggle(function () {
        REPEAT = true;
        $(this).addClass('active');
    }, function () {
        REPEAT = false;
        $(this).removeClass('active');
    });
 
    $('.playlist').delegate('li', 'click', function () {
        var id = $(this).data('id');
        loadSong(id);
        play();
    });
 
    rewind();
    collapsePlayer();
 
});
Ответить с цитированием