jQuery 经典怀旧卡带播放器

Old School Cassette Player with HTML5 Audio 必须收藏的 jQuery 经典作品之一。在没有iPod等产品之前，卡带播放器曾经还是很流行的，那时磁带（Tape）是音乐、英语学习必备。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1826
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(window, $, undefined) {

var aux = {

getSupportedType: function() {

var audio = document.createElement('audio');

if (audio.canPlayType('audio/mpeg;')) {

return 'mp3';

} else if (audio.canPlayType('audio/ogg;')) {

return 'ogg';

} else {

return 'wav';

}

};

// Cassette obj
    $.Cassette = function(options, element) {

this.$el = $(element);
        this._init(options);

};

$.Cassette.defaults = {
        // song names. Assumes the path of each song is songs/name.filetype
        songs: ['BlueDucks_FourFlossFiveSix', 'BlankKytt_ThursdaySnowReprise', 'BlueDucks_FlossSuffersFromGammaRadiation', 'BlankKyt_RSPN'],
        fallbackMessage: 'HTML5 audio not supported',
        // initial sound volume
        initialVolume: 0.7
    };

$.Cassette.prototype = {

_init: function(options) {

var _self = this;

// the options
            this.options = $.extend(true, {}, $.Cassette.defaults, options);

// current side of the tape
            this.currentSide = 1;
            // current time of playing side
            this.cntTime = 0;
            // current sum of the duration of played songs 
            this.timeIterator = 0;
            // used for rewind / forward
            this.elapsed = 0.0;
            // action performed
            this.lastaction = '';
            // if play / forward / rewind active..
            this.isMoving = false;

this.$loader = this.$el.find('div.vc-loader').show();

// create cassette sides
            $.when(this._createSides()).done(function() {

_self.$loader.hide();

// create player
                _self._createPlayer();
                _self.sound = new $.Sound();
                // load events
                _self._loadEvents();

});

},
        _getSide: function() {

return (this.currentSide === 1) ? {
                current: this.side1,
                reverse: this.side2
            } : {
                current: this.side2,
                reverse: this.side1
            };

},
        // songs are distributed equally on both sides
        _createSides: function() {

var playlistSide1 = [],
                playlistSide2 = [],
                _self = this,
                cnt = 0;

return $.Deferred(

function(dfd) {

for (var i = 0, len = _self.options.songs.length; i < len; ++i) {

var song = new $.Song(_self.options.songs[i], i);

$.when(song.loadMetadata()).done(function(song) {

(song.id < len / 2) ? playlistSide1.push(song): playlistSide2.push(song);

++cnt;

if (cnt === len) {

// two sides, each side with multiple songs
                                _self.side1 = new $.Side('side1', playlistSide1, 'start'),
                                    _self.side2 = new $.Side('side2', playlistSide2, 'end');

dfd.resolve();

}

});

}

).promise();

},
        _createPlayer: function() {

// create HTML5 audio element
            this.$audioEl = $('<audio id="audioElem"><span>' + this.options.fallbackMessage + '</span></audio>');
            this.$el.prepend(this.$audioEl);

this.audio = this.$audioEl.get(0);

// create custom controls
            this._createControls();

this.$theTape = this.$el.find('div.vc-tape');
            this.$wheelLeft = this.$theTape.find('div.vc-tape-wheel-left');
            this.$wheelRight = this.$theTape.find('div.vc-tape-wheel-right');
            this.$tapeSideA = this.$theTape.find('div.vc-tape-side-a').show();
            this.$tapeSideB = this.$theTape.find('div.vc-tape-side-b');

},
        _createControls: function() {

var _self = this;

this.$controls = $('<ul class="vc-controls" style="display:none;"/>');

this.$cPlay = $('<li class="vc-control-play">Play<span></span></li>');
            this.$cRewind = $('<li class="vc-control-rewind">Rew<span></span></li>');
            this.$cForward = $('<li class="vc-control-fforward">FF<span></span></li>');
            this.$cStop = $('<li class="vc-control-stop">Stop<span></span></li>');
            this.$cSwitch = $('<li class="vc-control-switch">Switch<span></span></li>');

this.$controls.append(this.$cPlay)
                .append(this.$cRewind)
                .append(this.$cForward)
                .append(this.$cStop)
                .append(this.$cSwitch)
                .appendTo(this.$el);

this.$volume = $('<div style="display:none;" class="vc-volume-wrap"><div class="vc-volume-control"><div class="vc-volume-knob"></div></div></div> ').appendTo(this.$el);

if (document.createElement('audio').canPlayType) {

if (!document.createElement('audio').canPlayType('audio/mpeg') && !document.createElement('audio').canPlayType('audio/ogg')) {

// TODO: flash fallback!

} else {

this.$controls.show();
                    this.$volume.show();
                    this.$volume.find('div.vc-volume-knob').knobKnob({
                        snap: 10,
                        value: 359 * this.options.initialVolume,
                        turn: function(ratio) {

_self._changeVolume(ratio);

}
                    });

this.audio.volume = this.options.initialVolume;
                }

}

},
        _loadEvents: function() {

var _self = this;

this.$cSwitch.on('mousedown', function(event) {

_self._setButtonActive($(this));
                _self._switchSides();

});

this.$cPlay.on('mousedown', function(event) {

_self._setButtonActive($(this));
                _self._play();

});

this.$cStop.on('mousedown', function(event) {

_self._setButtonActive($(this));
                _self._stop();

});

this.$cForward.on('mousedown', function(event) {

_self._setButtonActive($(this));
                _self._forward();

});

this.$cRewind.on('mousedown', function(event) {

_self._setButtonActive($(this));
                _self._rewind();

});

this.$audioEl.on('timeupdate', function(event) {

_self.cntTime = _self.timeIterator + _self.audio.currentTime;
                var wheelVal = _self._getWheelValues(_self.cntTime);
                _self._updateWheelValue(wheelVal);

});

this.$audioEl.on('loadedmetadata', function(event) {

});

this.$audioEl.on('ended', function(event) {

_self.timeIterator += _self.audio.duration;
                _self._play();

});

},
        _setButtonActive: function($button) {

// TODO. Solve! For now:
            $button.addClass('vc-control-pressed');

setTimeout(function() {

$button.removeClass('vc-control-pressed');

}, 100);

},
        _updateAction: function(action) {

this.lastaction = action;

},
        _prepare: function(song) {

this._clear();
            this.$audioEl.attr('src', song.getSource(aux.getSupportedType()));

},
        _switchSides: function() {

if (this.isMoving) {

alert('Please stop the player before switching sides.');
                return false;

}

this.sound.play('switch');

var _self = this;

this.lastaction = '';

if (this.currentSide === 1) {

this.currentSide = 2;

this.$theTape.css({
                    '-webkit-transform': 'rotate3d(0, 1, 0, 180deg)',
                    '-moz-transform': 'rotate3d(0, 1, 0, 180deg)',
                    '-o-transform': 'rotate3d(0, 1, 0, 180deg)',
                    '-ms-transform': 'rotate3d(0, 1, 0, 180deg)',
                    'transform': 'rotate3d(0, 1, 0, 180deg)'
                });

setTimeout(function() {

_self.$tapeSideA.hide();
                    _self.$tapeSideB.show();

// update wheels
                    _self.cntTime = _self._getPosTime();

}, 200);

} else {

this.currentSide = 1;

this.$theTape.css({
                    '-webkit-transform': 'rotate3d(0, 1, 0, 0deg)',
                    '-moz-transform': 'rotate3d(0, 1, 0, 0deg)',
                    '-o-transform': 'rotate3d(0, 1, 0, 0deg)',
                    '-ms-transform': 'rotate3d(0, 1, 0, 0deg)',
                    'transform': 'rotate3d(0, 1, 0, 0deg)'
                });

setTimeout(function() {

_self.$tapeSideB.hide();
                    _self.$tapeSideA.show();

// update wheels
                    _self.cntTime = _self._getPosTime();

}, 200);

}

},
        _updateButtons: function(button) {

var pressedClass = 'vc-control-active';

this.$cPlay.removeClass(pressedClass);
            this.$cStop.removeClass(pressedClass);
            this.$cRewind.removeClass(pressedClass);
            this.$cForward.removeClass(pressedClass);

switch (button) {

case 'play':
                    this.$cPlay.addClass(pressedClass);
                    break;
                case 'rewind':
                    this.$cRewind.addClass(pressedClass);
                    break;
                case 'forward':
                    this.$cForward.addClass(pressedClass);
                    break;

}

},
        _changeVolume: function(ratio) {

this.audio.volume = ratio;

},
        _play: function() {

var _self = this;

this._updateButtons('play');

$.when(this.sound.play('click')).done(function() {

var data = _self._updateStatus();

if (data) {

_self._prepare(_self._getSide().current.getSong(data.songIdx));

_self.$audioEl.on('canplay', function(event) {

$(this).off('canplay');

_self.audio.currentTime = data.timeInSong;
                        _self.audio.play();
                        _self.isMoving = true;

_self._setWheelAnimation('2s', 'play');

});

}

});

},
        _updateStatus: function(buttons) {

var posTime = this.cntTime;

// first stop
            this._stop(true);

this._setSidesPosStatus('middle');

// the current time to play is this.cntTime +/- [this.elapsed]
            if (this.lastaction === 'forward') {

posTime += this.elapsed;

} else if (this.lastaction === 'rewind') {

posTime -= this.elapsed;

}

// check if we have more songs to play on the current side..
            if (posTime >= this._getSide().current.getDuration()) {

this._stop(buttons);
                this._setSidesPosStatus('end');
                return false;

}

this._resetElapsed();

// given this, we need to know which song is playing at this point in time,
            // and from which point in time within the song we will play
            var data = this._getSongInfoByTime(posTime);

// update cntTime
            this.cntTime = posTime;
            // update timeIterator
            this.timeIterator = data.iterator;

return data;

},
        _rewind: function() {

var _self = this,
                action = 'rewind';

if (this._getSide().current.getPositionStatus() === 'start') {

return false;

}

this._updateButtons(action);

$.when(this.sound.play('click')).done(function() {

_self._updateStatus(true);
                _self.isMoving = true;

_self._updateAction(action);
                _self.sound.play('rewind', true);
                _self._setWheelAnimation('0.5s', action);
                _self._timer();

});

},
        _forward: function() {

var _self = this,
                action = 'forward';

if (this._getSide().current.getPositionStatus() === 'end') {

return false;

}

this._updateButtons(action);

$.when(this.sound.play('click')).done(function() {

_self._updateStatus(true);
                _self.isMoving = true;

_self._updateAction(action);
                _self.sound.play('fforward', true);
                _self._setWheelAnimation('0.5s', action);
                _self._timer();

});

},
        _stop: function(buttons) {

if (!buttons) {

this._updateButtons('stop');
                this.sound.play('click');

}
            this.isMoving = false;
            this._stopWheels();
            this.audio.pause();
            this._stopTimer();

},
        _clear: function() {

this.$audioEl.children('source').remove();

},
        _setSidesPosStatus: function(position) {

this._getSide().current.setPositionStatus(position);

switch (position) {

case 'middle':
                    this._getSide().reverse.setPositionStatus(position);
                    break;
                case 'start':
                    this._getSide().reverse.setPositionStatus('end');
                    break;
                case 'end':
                    this._getSide().reverse.setPositionStatus('start');
                    break;

}

},
        // given a point in time for the current side, returns the respective song of that side and the respective time within the song
        _getSongInfoByTime: function(time) {

var data = {
                    songIdx: 0,
                    timeInSong: 0
                },
                side = this._getSide().current,
                playlist = side.getPlaylist(),
                len = side.getPlaylistCount(),
                cntTime = 0;

for (var i = 0; i < len; ++i) {

var song = playlist[i],
                    duration = song.getDuration();

cntTime += duration;

if (cntTime > time) {

data.songIdx = i;
                    data.timeInSong = time - (cntTime - duration);
                    data.iterator = cntTime - duration;

return data;

}

return data;

},
        _getWheelValues: function(x) {

var T = this._getSide().current.getDuration(),
                val = {
                    left: (this.currentSide === 1) ? (-70 / T) * x + 70 : (70 / T) * x,
                    right: (this.currentSide === 1) ? (70 / T) * x : (-70 / T) * x + 70
                };
            return val;

},
        _getPosTime: function() {

var wleft = this.$wheelLeft.data('wheel'),
                wright = this.$wheelRight.data('wheel');

if (wleft === undefined) {

wleft = 70;

}
            if (wright === undefined) {

wright = 0;

}

var T = this._getSide().current.getDuration(),
                posTime = this.currentSide === 2 ? (T * wleft) / 70 : (T * wright) / 70;

return posTime;

},
        _updateWheelValue: function(wheelVal) {

this.$wheelLeft.data('wheel', wheelVal.left).css({
                'box-shadow': '0 0 0 ' + wheelVal.left + 'px black'
            });
            this.$wheelRight.data('wheel', wheelVal.right).css({
                'box-shadow': '0 0 0 ' + wheelVal.right + 'px black'
            });

},
        _setWheelAnimation: function(speed, mode) {

var _self = this,
                anim = '';

switch (this.currentSide) {

case 1:
                    if (mode === 'play' || mode === 'forward') {
                        anim = 'rotateLeft';
                    } else if (mode === 'rewind') {
                        anim = 'rotateRight';
                    }
                    break;
                case 2:
                    if (mode === 'play' || mode === 'forward') {
                        anim = 'rotateRight';
                    } else if (mode === 'rewind') {
                        anim = 'rotateLeft';
                    }
                    break;

}

var animStyle = {
                '-webkit-animation': anim + ' ' + speed + ' linear infinite forwards',
                '-moz-animation': anim + ' ' + speed + ' linear infinite forwards',
                '-o-animation': anim + ' ' + speed + ' linear infinite forwards',
                '-ms-animation': anim + ' ' + speed + ' linear infinite forwards',
                'animation': anim + ' ' + speed + ' linear infinite forwards'
            };

setTimeout(function() {

_self.$wheelLeft.css(animStyle);
                _self.$wheelRight.css(animStyle);

}, 0);

},
        _stopWheels: function() {

var wheelStyle = {
                '-webkit-animation': 'none',
                '-moz-animation': 'none',
                '-o-animation': 'none',
                '-ms-animation': 'none',
                'animation': 'none'
            }

this.$wheelLeft.css(wheelStyle);
            this.$wheelRight.css(wheelStyle);

},
        // credits: http://www.sitepoint.com/creating-accurate-timers-in-javascript/
        _timer: function() {

var _self = this,
                start = new Date().getTime(),
                time = 0;

this._resetElapsed();

this.isSeeking = true;

this._setSidesPosStatus('middle');

if (this.isSeeking) {

clearTimeout(this.timertimeout);
                this.timertimeout = setTimeout(function() {

_self._timerinstance(start, time);

}, 100);

}

},
        _timerinstance: function(start, time) {

var _self = this;

time += 100;

this.elapsed = Math.floor(time / 20) / 10;

if (Math.round(this.elapsed) == this.elapsed) {

this.elapsed += 0.0;

}

// stop if it reaches the end of the cassette / side
            // or if it reaches the beginning
            var posTime = this.cntTime;

if (this.lastaction === 'forward') {

posTime += this.elapsed;

} else if (this.lastaction === 'rewind') {

posTime -= this.elapsed;

}

var wheelVal = this._getWheelValues(posTime);
            this._updateWheelValue(wheelVal);

if (posTime >= this._getSide().current.getDuration() || posTime <= 0) {

this._stop();
                (posTime <= 0) ? this.cntTime = 0: this.cntTime = posTime;
                this._resetElapsed();
                (posTime <= 0) ? this._setSidesPosStatus('start'): this._setSidesPosStatus('end');
                return false;

}

var diff = (new Date().getTime() - start) - time;

if (this.isSeeking) {

clearTimeout(this.timertimeout);
                this.timertimeout = setTimeout(function() {

_self._timerinstance(start, time);

}, (100 - diff));

}

},
        _stopTimer: function() {

clearTimeout(this.timertimeout);
            this.isSeeking = false;

},
        _resetElapsed: function() {

this.elapsed = 0.0;

}

};

// Cassette side obj
    $.Side = function(id, playlist, status) {

// side's name / id
        this.id = id;
        // status is "start", "middle" or "end"
        this.status = status;
        // array of songs sorted by song id
        this.playlist = playlist.sort(function(a, b) {

var aid = a.id,
                bid = b.id;

return ((aid < bid) ? -1 : ((aid > bid) ? 1 : 0));

});
        // set playlist duration
        this._setDuration();
        // total number of songs
        this.playlistCount = playlist.length;

};

$.Side.prototype = {

getSong: function(num) {

return this.playlist[num];

},
        getPlaylist: function() {

return this.playlist;

},
        _setDuration: function() {

this.duration = 0;

for (var i = 0, len = this.playlist.length; i < len; ++i) {

this.duration += this.playlist[i].duration;

}

},
        getDuration: function() {

return this.duration;

},
        getPlaylistCount: function() {

return this.playlistCount;

},
        setPositionStatus: function(status) {

this.status = status;

},
        getPositionStatus: function() {

return this.status;

}

};

// Song obj
    $.Song = function(name, id) {

this.id = id;
        this.name = name;
        this._init();

};

$.Song.prototype = {

_init: function() {

this.sources = {
                mp3: '/uploads/160101/CassettePlayer/songs/' + this.name + '.mp3',
                ogg: '/uploads/160101/CassettePlayer/songs/' + this.name + '.ogg'
            };

},
        getSource: function(type) {

return this.sources[type];

},
        // load metadata to get the duration of the song
        loadMetadata: function() {

var _self = this;

return $.Deferred(

function(dfd) {

var $tmpAudio = $('<audio/>'),
                        songsrc = _self.getSource(aux.getSupportedType());

$tmpAudio.attr('preload', 'auto');
                    $tmpAudio.attr('src', songsrc);

$tmpAudio.on('loadedmetadata', function(event) {

_self.duration = $tmpAudio.get(0).duration;
                        dfd.resolve(_self);

});

}

).promise();

},
        getDuration: function() {

return this.duration;

}

};

// Sound obj
    $.Sound = function() {

this._init();

};

$.Sound.prototype = {

_init: function() {

this.$audio = $('<audio/>').attr('preload', 'auto');

},
        getSource: function(type) {

return '/uploads/160101/CassettePlayer/sounds/' + this.action + '.' + type;

},
        play: function(action, loop) {

var _self = this;
            return $.Deferred(function(dfd) {

_self.action = action;

var soundsrc = _self.getSource(aux.getSupportedType());

_self.$audio.attr('src', soundsrc);
                if (loop) {

_self.$audio.attr('loop', loop);

} else {

_self.$audio.removeAttr('loop');

}

_self.$audio.on('canplay', function(event) {

// TODO: change timeout to ended event . ended event does not trigger for safari ?
                    setTimeout(function() {

dfd.resolve();

}, 300);
                    $(this).get(0).play();

});

}

};

var logError = function(message) {

if (window.console) {

window.console.error(message);

}

};

$.fn.cassette = function(options) {

if (typeof options === 'string') {

var args = Array.prototype.slice.call(arguments, 1);

this.each(function() {

var instance = $.data(this, 'cassette');

if (!instance) {

logError("cannot call methods on cassette prior to initialization; " +
                        "attempted to call method '" + options + "'");
                    return;

}

if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {

logError("no such method '" + options + "' for cassette instance");
                    return;

}

instance[options].apply(instance, args);

});

} else {

this.each(function() {

var instance = $.data(this, 'cassette');
                if (!instance) {
                    $.data(this, 'cassette', new $.Cassette(options, this));
                }
            });

}

return this;

};

})(window, jQuery);

编译

CSS

/* Icon font for player controls */

@font-face {
    font-family: 'playericons';
    src: url("/fonts/playericons/playericons.eot");
    src: url("/fonts/playericons/playericons.eot?#iefix") format('embedded-opentype'), url("/fonts/playericons/playericons.woff") format('woff'), url("/fonts/playericons/playericons.ttf") format('truetype'), url("/fonts/playericons/playericons.svg#playericons") format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: Cambria, Georgia, serif;
    background: #b6b6b6 url(/uploads/fiddles/701/bg.jpg) fixed no-repeat top center;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    overflow-y: scroll;
    overflow-x: hidden;
}
a {
    color: #2886bc;
    text-decoration: none;
}
a:hover {
    color: #000;
}
.container {
    width: 100%;
    position: relative;
}
.clr {
    clear: both;
    padding: 0;
    height: 0;
    margin: 0;
}
.container > header {
    margin: 10px 10px 0px 10px;
    padding: 20px 10px 0px 10px;
    position: relative;
    display: block;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.container > header h1 {
    font-family: 'Aldrich';
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    position: relative;
    font-weight: 300;
    color: #666;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.container > header h1 span {
    font-weight: 700;
}
.container > header h2 {
    width: 500px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 300;
    margin: 0 auto;
    padding: 15px 0 5px 0;
    color: #666;
    font-style: italic;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
}
.container > header h2 strong {
    color: #781430;
}
.main {
    width: 672px;
    height: 480px;
    padding: 30px 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* Header Style */
    
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.codrops-top {
    line-height: 24px;
    font-size: 11px;
    background: #fff;
    background: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    z-index: 9999;
    position: relative;
    font-family: Cambria, Georgia, serif;
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.2);
}
.codrops-top a {
    padding: 0px 10px;
    letter-spacing: 1px;
    color: #333;
    display: inline-block;
}
.codrops-top a:hover {
    background: rgba(255, 255, 255, 0.3);
}
.codrops-top span.right {
    float: right;
}
.codrops-top span.right a {
    float: left;
    display: block;
}
.attribution {
    width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 10px 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    font-size: 10px;
    font-family: 'Aldrich';
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    color: #666;
}
.support-note span {
    color: #ac375d;
    font-size: 16px;
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions {
    display: block;
}
.vc-container {
    text-align: center;
    /* Tape elements */
    
    height: 500px;
    margin-bottom: 50px;
    position: relative;
}
.vc-tape-wrapper {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
}
.vc-tape {
    width: 586px;
    height: 379px;
    margin: 30px auto 0;
    position: relative;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.vc-loader {
    position: absolute;
    width: 31px;
    height: 31px;
    bottom: 50px;
    left: 50%;
    margin: -15px 0 0 -15px;
    background: transparent url(/uploads/fiddles/701/ajax-loader.gif) no-repeat center center;
    display: none;
}
.vc-tape-back {
    width: 100%;
    height: 100%;
    position: relative;
    background: transparent url(/uploads/fiddles/701/cs_back.png) no-repeat center center;
}
.vc-tape-wheel {
    width: 125px;
    height: 125px;
    position: absolute;
    top: 110px;
    background: transparent;
    border-radius: 50%;
}
.vc-tape-wheel-left {
    left: 109px;
    box-shadow: 0 0 0 70px #000;
}
.vc-tape-wheel-right {
    right: 113px;
}
@-webkit-keyframes rotateLeft {
    0% {
        -webkit-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -webkit-transform: rotate(-360deg) translateZ(-1px);
    }
}
@-webkit-keyframes rotateRight {
    0% {
        -webkit-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -webkit-transform: rotate(360deg) translateZ(-1px);
    }
}
@-moz-keyframes rotateLeft {
    0% {
        -moz-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -moz-transform: rotate(-360deg) translateZ(-1px);
    }
}
@-moz-keyframes rotateRight {
    0% {
        -moz-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -moz-transform: rotate(360deg) translateZ(-1px);
    }
}
@-o-keyframes rotateLeft {
    0% {
        -o-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -o-transform: rotate(-360deg) translateZ(-1px);
    }
}
@-o-keyframes rotateRight {
    0% {
        -o-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -o-transform: rotate(360deg) translateZ(-1px);
    }
}
@-ms-keyframes rotateLeft {
    0% {
        -ms-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -ms-transform: rotate(-360deg) translateZ(-1px);
    }
}
@-ms-keyframes rotateRight {
    0% {
        -ms-transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        -ms-transform: rotate(360deg) translateZ(-1px);
    }
}
@keyframes rotateLeft {
    0% {
        transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        transform: rotate(-360deg) translateZ(-1px);
    }
}
@keyframes rotateRight {
    0% {
        transform: rotate(0deg) translateZ(-1px);
    }
    100% {
        transform: rotate(360deg) translateZ(-1px);
    }
}
.vc-tape-wheel div {
    width: 100%;
    height: 100%;
    background: transparent url(/uploads/fiddles/701/cs_wheel.png) no-repeat center center;
}
.vc-tape-front {
    width: 100%;
    height: 100%;
    position: absolute;
    background: transparent url(/uploads/fiddles/701/cs_front.png) no-repeat center center;
    top: 0px;
    left: 0px;
}
.vc-tape-side-b {
    display: none;
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -o-transform: rotate3d(0, 1, 0, 180deg);
    -ms-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
}
.vc-tape-front span {
    color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 83px;
    left: 67px;
    /* Controls list */
    
    font-family: Arial;
    font-weight: bold;
    font-size: 20px;
}
ul.vc-controls {
    list-style: none;
    padding: 0;
    width: 440px;
    position: absolute;
    bottom: 18px;
    left: 50%;
    margin: 0 0 0 -170px;
    background: -moz-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(170, 170, 170, 0.35)), color-stop(50%, rgba(255, 255, 255, 0.44)), color-stop(100%, rgba(255, 255, 255, 0.53)));
    background: -webkit-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: -o-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: -ms-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: linear-gradient(to bottom, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#59aaaaaa', endColorstr='#87ffffff', GradientType=0);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.6);
    padding: 8px;
    height: 54px;
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(255, 255, 255, 0.4), inset 0 2px 19px rgba(0, 0, 0, 0.05), 0 2px 1px rgba(0, 0, 0, 0.06);
    -webkit-box-sizing: content-box;
    /* Controls list items */
    
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 12px;
}
ul.vc-controls li {
    display: block;
    float: left;
    width: 55px;
    height: 50px;
    line-height: 55px;
    text-align: left;
    padding: 0 10px;
    margin: 0;
    cursor: pointer;
    background: #ddd url(/uploads/fiddles/701/metal.jpg) no-repeat center top;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -6px 5px rgba(0, 0, 0, 0.1), 0 6px 7px rgba(0, 0, 0, 0.3), 0 4px 1px rgba(0, 0, 0, 0.5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul.vc-controls li:first-child {
    border-radius: 8px 0 0 8px;
}
ul.vc-controls li:last-child {
    border-radius: 0px 8px 8px 0px;
}
ul.vc-controls li.vc-control-play {
    width: 120px;
}
ul.vc-controls li span:before {
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    float: left;
    color: #444;
    font-family: 'playericons';
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
}
li.vc-control-pause span:before {
    content: '\50';
}
li.vc-control-fforward span:before {
    content: '\23e9';
}
li.vc-control-rewind span:before {
    content: '\23ea';
}
li.vc-control-stop span:before {
    content: '\25aa';
}
li.vc-control-play span:before {
    content: '\70';
}
li.vc-control-volume-off span:before {
    content: 'e?”?';
}
li.vc-control-volume-down span:before {
    content: 'e?”‰';
}
li.vc-control-volume-up span:before {
    content: 'e?”?';
}
ul.vc-controls li:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -10px 15px rgba(0, 0, 0, 0.1), 0 6px 7px rgba(0, 0, 0, 0.3), 0 4px 1px rgba(0, 0, 0, 0.5);
}
ul.vc-controls li.vc-control-active {
    height: 50px;
    /* Activated */
    
    margin-top: 2px;
    background-image: url(/uploads/fiddles/701/metal_dark.jpg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -6px 5px rgba(0, 0, 0, 0.1), 0 6px 7px rgba(0, 0, 0, 0.3), 0 2px 1px rgba(0, 0, 0, 0.5);
}
ul.vc-controls li.vc-control-pressed,
ul.vc-controls li.vc-control-active.vc-control-pressed {
    height: 50px;
    /*  
Background for the volume knob 
See knobKnob.css for the knob style
*/
    
    background-image: url(/uploads/fiddles/701/metal_dark.jpg);
    margin-top: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.5), inset 0 -10px 15px rgba(0, 0, 0, 0.2), 0 7px 5px rgba(255, 255, 255, 0.5);
}
.vc-volume-wrap {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -318px;
    background: -moz-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(170, 170, 170, 0.35)), color-stop(50%, rgba(255, 255, 255, 0.44)), color-stop(100%, rgba(255, 255, 255, 0.53)));
    background: -webkit-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: -o-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: -ms-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    background: linear-gradient(to bottom, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#59aaaaaa', endColorstr='#87ffffff', GradientType=0);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    padding: 8px;
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 rgba(255, 255, 255, 0.4), inset 0 2px 19px rgba(0, 0, 0, 0.05), 0 2px 1px rgba(0, 0, 0, 0.06);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.vc-volume-wrap:after {
    /* Text style for controls */
    
    content: 'Volume';
    margin-top: 15px;
    display: block;
}
ul.vc-controls li,
.vc-volume-wrap:after {
    font-family: 'Aldrich';
    font-size: 10px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

HTML

<div class="container">
    <header>
        <h1><span>Old School Cassette Player</span> with HTML5 Audio</h1>
        <h2>Vintage format meets modern web tech: an HTML5 audio player with realistic controls <br /><strong>Best viewed &amp; listened to in modern browsers</strong></h2>

<div class="support-note">
            
            <span class="no-cssanimations">CSS animations are not supported in your browser</span>
            <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
            <span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
            <span class="no-csstransitions">CSS transitions are not supported in your browser</span>
            <span class="note-ie">Sorry, only modern browsers.</span>
        </div>

</header>

$('#vc-container').cassette();

});
</script>

Old School Cassette Player with HTML5 Audio 必须收藏的 jQuery 经典作品之一。在没有iPod等产品之前，卡带播放器曾经还是很流行的，那时磁带（Tape）是音乐、英语学习必备。

模板，教程

编辑器支持Emmet

快捷键

Old School Cassette Player with HTML5 Audio 必须收藏的 jQuery 经典作品之一。在没有iPod等产品之前，卡带播放器曾经还是很流行的，那时磁带（Tape）是音乐、英语学习必备。

模板，教程

使用jQuery创建带标注浮层效果#2

使用CSS3和jQuery创建的文章排版效果 - 3D折纸标题

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：