<!DOCTYPE html> <!-- /** * Cassette Tape UI Prototype (09/2012) * ALPHA build / experimental state, unsupported; use at own risk * Requires CSS3 border-radius + <canvas> support * http://www.schillmania.com/projects/soundmanager2/ */ --> <html> <head> <title>Cassette Tape Prototype: Canvas mask + blur effects version (MA-R90-style design)</title> <meta name="robots" content="noindex" /> <meta name="description" content="An experimental web audio player UI based on the TDK MA-R90 cassette tape, a classic metal-alloy cassette model from 1982. Includes slight translucency and blurring effects." /> <meta name="keywords" content="javascript sound, html5 audio, css3, cassette tape, tdk, mar, ma-r, mar90, html5 sound, javascript audio, schill, schillmania, soundmanager, soundmanager2" /> <meta name="author" content="Scott Schiller" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="screen" href="css/cassette-tape-ui.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/cassette-tape-ui-blur.css" /> <noscript> <!-- Legal? Probably not - but, works. --> <link rel="stylesheet" type="text/css" media="screen" href="css/cassette-tape-ui-blur-nojs.css" /> </noscript> <link rel="stylesheet" type="text/css" media="screen" href="css/demo.css" /> <script src="../../script/soundmanager2.js"></script> <script src="script/cassette-tape-ui.js"></script> <script src="script/demo.js"></script> </head> <body> <div id="demo-header-wrapper"> <div id="demo-header"> <h1>Cassette Tape UI</h1> <p>An exercise in skeuomorphic excess. <a id="nextBackground" href="#next" title="Change background">✭ </a> <a href="more.html" title="More cassette tape prototype designs">more ↬</a> <a href="../../" title="SoundManager 2 homepage">home ↬</a></p> </div> </div> <div id="tape-loader"> <div class="spinner-box"> <div class="spinner"></div> </div> </div> <!-- /** * DIV-tastic! Indeed, tons of elements in this version - but this allows for easy customization. * The basic version (no canvas + blur effects) uses more images for skinning and has a few less elements. */ --> <div class="draggable clear ma-r90 cutout tape"> <div class="blur-image-wrapper"> <canvas class="blur-image"></canvas> </div> <div class="transparency-sheet"></div> <div class="tape-shell image-mask" data-image-repeat="true" data-mask-url="image/ma-r90-mask.png"></div> <div class="tape-gradient image-mask" data-mask-url="image/ma-r90-mask.png"></div> <div class="tab-left"> <div class="notch"></div> <div class="ridge"></div> </div> <div class="tab-right"> <div class="notch"></div> <div class="ridge"></div> </div> <div class="rail-left"></div> <div class="rail-right"></div> <div class="rail-middle"> <div class="rail-middle-outline"> <div class="tape-pad-holder"> <div class="tape-pad"></div> <div class="tape-pad-line"></div> </div> </div> <div class="screw-bm"></div> </div> <div class="screw-tl"></div> <div class="screw-tr"></div> <div class="screw-bl"></div> <div class="screw-br"></div> <div class="screw-tm"></div> <div class="left reel-mask"></div> <div class="right reel-mask"></div> <canvas class="connecting-tape"></canvas> <div class="left reel"></div> <div class="left spokes"></div> <div class="right reel"></div> <div class="right spokes"></div> <div class="progress-notches"> <div class="n1"></div> <div class="n2"></div> <div class="n3"></div> <div class="n4"></div> <div class="n5"></div> <div class="n6"></div> <div class="n7"></div> <div class="n8"></div> <div class="n9"></div> </div> <!-- static label version --> <!-- <div class="label">Chill With Schill: Mixtape Demo</div> --> <!-- editable URL-based label for the demo, you don't need to use this --> <form id="tape-form" action="." method="get" onsubmit="return false"> <input class="label" name="tape_url" placeholder="Type an MP3 URL here ..." title="Click to edit and provide your own MP3 URL" value="Chill With Schill: Mixtape Demo" data-default-value="Chill With Schill: Mixtape Demo" /> </form> <div class="aqua controls"> <div class="bd"> <ul> <li><a href="#" title="play/pause" class="play">◄</a></li> <li><a href="#" title="rewind" class="rew">«</a></li> <li><a href="#" title="fast-forward" class="ffwd">»</a></li> <li><a href="#" title="stop" class="stop">■</a></li> </ul> </div> </div> </div> <div class="thanks"> <p>Mixtape demo includes "Render Your Heart" by <a href="http://sonreal.ca/" title="SonReal (official website)">SonReal</a>. For the complete mix, see <a href="http://www.mixcrate.com/schill/chill-with-schill-summer-idj-live-session-169722" title="Chill With Schill: Summer iDJ Live Session (mixcrate)">Chill With Schill: Summer iDJ Live Session</a> on Mixcrate.</p> </div> <script> (function() { window.setTimeout(function() { // transition hack document.getElementById('tape-loader').className = 'visible'; }, 1); // oh, what a hack! (demo only: no high-end unicode characters on WinXP) var char = '∞'; if (navigator.userAgent.indexOf('Windows NT 5.1') !== -1) { document.getElementById('nextBackground').innerHTML = char + ' '; } }()); </script> </body> </html>