JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.17.0/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.17.0/mediaelementplayer.css">
<script src="http://mtt.erichusted.com/assets/js/cookies.min.js?v=1.2.1"></script>
<div id="cookies">Last currentTime: <span></span></div>
<br /><br />
<p id="time">Current Time: <span></span></p>

<div id="player-bar" class="clearfix">
        <div class="mejs-player-bar">
            <audio id="player" class="mejs-gigm" style="width: 100%; height: 100%;" src="http://traffic.libsyn.com/recycling/Green_Is_Good_-_Show_108_Seg1_ISRI_2015_-_Joel_Litman_-_Texas_Recycling.mp3" type="audio/mp3" controls="controls" />
    </div>
</div>
<br /><br />
<div class="play-pause">Play/Pause</div>

JavaScript

// MediaElementJS
$(function() {
    var player = new MediaElementPlayer("#player", {
        success: function(media) {
            var cookieTime = Cookies.get("currentTime");
            var wasPlaying = Cookies.get("wasPlaying");
            
            media.setCurrentTime(cookieTime);
            
            $(function() {
                if (wasPlaying == 'true') {
                    player.play();
                } else {
                    player.pause();
                }
            });
            
            // Toggle Play/Pause & setting current time in cookie
            $('.play-pause').on('click', function() {
                if (media.paused){
                    media.play();
                    Cookies.set("currentTime", media.currentTime, { expire: 86400 }); // Expire in 1 day
                    Cookies.set("wasPlaying", 'true', { expire: 86400 }); // Expire in 1 day
                } else {
                    Cookies.set("currentTime", media.currentTime, { expire: 86400 }); // Expire in 1 day
                    Cookies.set("wasPlaying", 'false', { expire: 86400 }); // Expire in 1 day
                    media.pause();
                }
            });
            
            setInterval(function() {
                Cookies.set("currentTime", media.currentTime, { expire: 86400 }); // Expire in 1 day
            }, 5000);
        },
        enableAutosize: true
    });
});