samedi 27 juin 2015

HTML5 Local storage - Save last audio position.

I'm new to jQuery and HTML5. I'm messing around with local storage. Pretty cool. I'm trying to figure out with this audio player to have local storage load the last mp3 file the user clicked with HTML5 local storage.

The player will auto play and loop the same track over and over.

I'm also trying to have once the user click the stop button (pause) the audio player will stay on that as well for when the user goes back to the page with HTML5 local storage!

Thank you for any help! I'm still learning!

<div id="wrapper">
    <br>
    <a href="#" class="pause" data-src="music/1.mp3">Stop Music</a>
    <br><br>


    <audio preload></audio>
    <ol>

        <li><a href="#" class="track" data-src="music/1.mp3">Music 1</a>
        </li>
        <li><a href="#" class="track" data-src="music/1.mp3">Music 2</a>
        <li><a href="#" class="track" data-src="music/1.mp3">Music 3</a>
        </li>
    </ol>
</div>

<script src="jquery-1.11.3.min.js"></script>
<script src="audio.min.js"></script>
<script>


    document.querySelector('.track').onclick = function() {
        localStorage.setItem("name", $('ol a').attr('data-src'));
        localStorage.getItem('name');
    };


    $(function () {
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
            trackEnded: function () {
                var next = $('ol li.playing').next();
                if (!next.length) next = $('ol li').first();
                // next.addClass('playing').siblings().removeClass('playing');
                // audio.load($('a', next).attr('data-src'));
                // audio.play();
                audio.play();
            }
        });

        // Load in the first track
        var audio = a[0];
        first = $('ol a').attr('data-src');
        $('ol li').first().addClass('playing');
        audio.load(first);
        audio.play();

        // Load in a track on click
        $('ol li').click(function (e) {
            e.preventDefault();
            $(this).addClass('playing').siblings().removeClass('playing');
            audio.load($('a', this).attr('data-src'));
            audio.play();
        });


        // Pause audio 
        $('.pause').click(function (e) {
            audio.pause();
        });



    });


</script>

Aucun commentaire:

Enregistrer un commentaire