Блог

Я хочу использовать пользовательский аудиоплеер для воспроизведения звуковых дорожек, размещенных в Интернете.

Например, я хочу иметь возможность передавать аудиоплееру ссылку, например example.com/path/to/track.mp3 и он должен разобрать его и воспроизвести. Я могу воспроизводить звуковые дорожки, размещенные локально

Вот код, в котором у меня проблема. У меня есть аудиообъект, который указывает на локальную папку, в которой находятся звуковые дорожки. Я не уверен, как с этим бороться, если он не размещен локально.

Когда я заменяю путь URL-адресом, аудиоплеер просто зависает.

 $(function () {
    var count = 0;
    var audio;

    //Hide Pause
    $('#pause').hide();

    initAudio($('#playlist li:first-child'));

    function initAudio(element) {
        var song = element.attr('song');
        var cover = element.attr('cover');
        var artist = element.attr('artist');
        var title = element.text();
        var temp = parseFloat($('#volume-slider').val() / 100);

        //Create audio object
        audio = new Audio('../media/books/'   song);

        audio.volume = temp;

        audio.addEventListener("loadedmetadata", function () {
            minutes = parseInt(audio.duration / 60);
            seconds = parseInt(audio.duration % 60);

            if (seconds < 10) {
                seconds = '0'   seconds;
            };
            if (minutes < 10) {
                minutes = '0'   minutes;
            };
        
            $('#duration').html(minutes   ':'   seconds);
        });

        $("#auto-play").click(function () {
            if (count === 1) {
                $("#auto-play").css("background-color", "black");
                count = 0;
            } else {
                $("#auto-play").css("background-color", "rgb(0,0,255)");
                count = 1;
            }
        });

        audio.addEventListener('ended', function () {
            if (count > 0) {
                var next = $('#playlist li.active').next();
                if (next.length == 0) {
                    next = $('#playlist li:first-child');
                }
                initAudio($(next));
                audio.play();
                showCurrentTime();
            }
        });

        //Inserts track info
        $('.artist').text(artist);
        $('.title').text(title);
        $('#duration').text();
        //Insert song cover. NOTE: the path below is relative to the 
        //html "img.cover" element not this js file.
        $('img.cover').attr('src', '../media/books/covers/'   cover);
        $('#playlist li').removeClass('active');
        element.addClass('active');
    };
});
  

Вы можете избежать ошибок CORS с помощью чего-то подобного. Для вашей локальной разработки это было бы легко. Если вы хотите перейти на продакшн, это будет немного сложнее. Сервер с саундтреками должен принять ваше приложение.