Script work on local server but not work online

I tried it anyway on Chrome and Firefox, and it doesn’t display on either browser.

The page concerned is: https://www.wemagic-africa.com/albums/kemtaan-ep/
Here is the JS code

jQuery(function ($) {
    'use strict'
    var supportsAudio = !!document.createElement('audio').canPlayType;
    if (supportsAudio) {
        // initialize plyr
        var player = new Plyr('#kemtaanep', {
            controls: [
                'restart',
                'play',
                'progress',
                'current-time',
                'duration',
                'mute',
                'volume'
            ]
        });
        // initialize playlist and controls
        var index = 0,
            playing = false,
            mediaPath = 'http://127.0.0.1/wemagic/wp-content/themes/wemagic/music/kemtaan-ep/',
            extension = '',
            tracks = [{
                "track": 1,
                "name": "Quoi que je fasse",
                "duration": "3:17",
                "file": "QQJF"
            }, {
                "track": 2,
                "name": "Évidemment Feat Sir Demos",
                "duration": "3:36",
                "file": "EVDMT"
            }, {
                "track": 3,
                "name": "Hors de contrôle",
                "duration": "3:57",
                "file": "HDC"
            }, {
                "track": 4,
                "name": "T'es sérieux",
                "duration": "3:34",
                "file": "TS"
            }, {
                "track": 5,
                "name": "Prêt pour la suite Feat Sir Demos",
                "duration": "3:07",
                "file": "PPLS"
            }, {
                "track": 6,
                "name": "Ce qu'il faut",
                "duration": "4:00",
                "file": "CQTF"
            }],
            buildPlaylist = $(tracks).each(function(key, value) {
                var trackNumber = value.track,
                    trackName = value.name,
                    trackDuration = value.duration;
                if (trackNumber.toString().length === 1) {
                    trackNumber = '0' + trackNumber;
                }
                $('#plList').append('<li> \
                    <div class="plItem"> \
                        <span class="plNum">' + trackNumber + '.</span> \
                        <span class="plTitle">' + trackName + '</span> \
                        <span class="plLength">' + trackDuration + '</span> \
                    </div> \
                </li>');
            }),
            trackCount = tracks.length,
            npAction = $('#npAction'),
            npTitle = $('#npTitle'),
            audio = $('#kemtaanep').on('play', function () {
                playing = true;
                npAction.text('Lecture en cours...');
            }).on('pause', function () {
                playing = false;
                npAction.text('En Pause...');
            }).on('ended', function () {
                npAction.text('En Pause...');
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    audio.play();
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }).get(0),
            btnPrev = $('#btnPrev').on('click', function () {
                if ((index - 1) > -1) {
                    index--;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            btnNext = $('#btnNext').on('click', function () {
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            li = $('#plList li').on('click', function () {
                var id = parseInt($(this).index());
                if (id !== index) {
                    playTrack(id);
                }
            }),
            loadTrack = function (id) {
                $('.plSel').removeClass('plSel');
                $('#plList li:eq(' + id + ')').addClass('plSel');
                npTitle.text(tracks[id].name);
                index = id;
                audio.src = mediaPath + tracks[id].file + extension;
            },
            playTrack = function (id) {
                loadTrack(id);
                audio.play();
            };
        extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
        loadTrack(index);
    } else {
        // boo hoo
        $('.column').addClass('hidden');
        var noSupport = $('#kemtaanep').text();
        $('.playpanel').append('<p class="no-support">' + noSupport + '</p>');
    }
});

Please see me if there is any code in it that is not supported by WordPress (But it will be weird because the site works very well with wordpress on the local server).

The Player I inserted is this one: https://codepen.io/markhillard/pen/Hjcwu
You can find all the codes on this CodePen page.

Thank you for your help.

• This reply was modified 5 years, 5 months ago by worksfather.