/* SoundManager 2: In-page MP3 player example ------------------------------------------ Clicks on links to MP3s are intercepted via JS, calls are made to SoundManager to load/play sounds. CSS classes are appended to the link, which are used to highlight the current play state and so on. Class names are applied in addition to "sm2_link" base. Default: sm2_link Additional states: sm2_playing sm2_paused eg. some.mp3 some.mp3 Note you don't require ul.graphic / ul.flat etc. for your use if only using one style on a page. You can just use .sm2_link{} and so on, but isolate the CSS you want. Side note: Would do multiple class definitions eg. a.sm2_default.sm2_playing{} .. except IE 6 has a parsing bug which may break behaviour, applying sm2_playing {} even when the class is set to sm2_default. If you want to make your own UI from scratch, here is the base: Default + hover state, "click to play": a.sm2_link {} a.sm2_link:hover {} Playing + hover state, "click to pause": a.sm2_playing {} a.sm2_playing:hover {} Paused + hover state, "click to resume": a.sm2_paused {} a.sm2_paused:hover {} */ /* two different list types */ ul.flat { list-style-type:none; padding-left:0px; } ul.flat li, ul.graphic li { padding-bottom:1px; } ul.flat li a { display:inline-block; padding:2px 4px 2px 4px; } ul.graphic { list-style-type:none !important; padding-left:0px; margin-left:0px; } /* background-image-based CSS3 example */ ul.graphic { list-style-type:none !important; margin:0px; padding:0px; } ul.graphic li { margin-bottom:0px; } ul.graphic li a, ul.graphic li a.sm2_link { /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */ display:inline-block; padding-left:22px; min-height:16px; vertical-align: middle; border-radius:3px; padding:3px 3px 3px 25px; min-width:19em; _width:19em; /* IE 6 */ text-decoration:none; font-weight:normal; } ul.graphic li a.sm2_link { /* safari 3.1+ fun (or, proprietary crap. TBD.) */ -webkit-transition-property: hover; -webkit-transition: background-color 0.15s linear; -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */ -o-transition-property: background-color; /* opera 10.5 */ -o-transition-duration: 0.15s; } ul.graphic li a, /* use a.sm2_link {} if you want play icons showing only if SM2 is supported */ ul.graphic li a.sm2_paused:hover, ul.graphic li a.sm2_link:hover { background-image:url(../image/icon_play.png); background-position:3px 50%; background-repeat:no-repeat; _background-image:url(../image/icon_play.gif); /* IE 6 */ } ul.graphic li a.sm2_paused:hover { background: url(../image/icon_play.png) no-repeat 3px 50%; _background-image:url(../image/icon_play.gif); } ul.graphic li a.sm2_playing, ul.graphic li a.sm2_playing:hover { background: url(../image/icon_pause.png) no-repeat 3px 50%; _background-image:url(../image/icon_pause.gif); text-decoration:none; } /* hide button while playing? ul.graphic li a.sm2_playing { background-image:none; } */ body #sm2-container object, body #sm2-container embed { /* flashblock handling: hide SWF off-screen by default (until blocked timeout case.) include body prefix to ensure override of flashblock.css. */ left:-9999em; top:-9999em; } /* flat CSS example */ ul.flat a.sm2_link { /* default state: "a playable link" */ border-left:6px solid #999; padding-left:4px; padding-right:4px; } ul.flat a.sm2_link:hover { /* default (inactive) hover state */ border-left-color:#333; } ul.flat a.sm2_playing { /* "now playing" */ border-left-color:#6666ff; text-decoration:underline; ul.flat a.sm2_paused:hover { /* "clicking will resume" */ border-left-color:#33cc33; }
SOMMARIO
BIBBIAVOX
Vai ai contenuti
/** * * SoundManager 2 Demo: Play MP3 links "in-place" * ---------------------------------------------- * * http://schillmania.com/projects/soundmanager2/ * * A simple demo making MP3s playable "inline" * and easily styled/customizable via CSS. * * Requires SoundManager 2 Javascript API. * */ function InlinePlayer() { var self = this; var pl = this; var sm = soundManager; // soundManager instance var isIE = (navigator.userAgent.match(/msie/i)); this.playableClass = 'inline-playable'; // CSS class for forcing a link to be playable (eg. doesn't have .MP3 in it) this.excludeClass = 'inline-exclude'; // CSS class for ignoring MP3 links this.links = []; this.sounds = []; this.soundsByURL = []; this.indexByURL = []; this.lastSound = null; this.soundCount = 0; this.config = { playNext: false, // stop after one sound, or play through list until end autoPlay: true // start playing the first sound right away } this.css = { // CSS class names appended to link during various states sDefault: 'sm2_link', // default state sLoading: 'sm2_loading', sPlaying: 'sm2_playing', sPaused: 'sm2_paused' } this.addEventHandler = (typeof window.addEventListener !== 'undefined' ? function(o, evtName, evtHandler) { return o.addEventListener(evtName,evtHandler,false); } : function(o, evtName, evtHandler) { o.attachEvent('on'+evtName,evtHandler); }); this.removeEventHandler = (typeof window.removeEventListener !== 'undefined' ? function(o, evtName, evtHandler) { return o.removeEventListener(evtName,evtHandler,false); } : function(o, evtName, evtHandler) { return o.detachEvent('on'+evtName,evtHandler); }); this.classContains = function(o,cStr) { return (typeof(o.className)!='undefined'?o.className.match(new RegExp('(\\s|^)'+cStr+'(\\s|$)')):false); } this.addClass = function(o,cStr) { if (!o || !cStr || self.classContains(o,cStr)) return false; o.className = (o.className?o.className+' ':'')+cStr; } this.removeClass = function(o,cStr) { if (!o || !cStr || !self.classContains(o,cStr)) return false; o.className = o.className.replace(new RegExp('( '+cStr+')|('+cStr+')','g'),''); } this.getSoundByURL = function(sURL) { return (typeof self.soundsByURL[sURL] != 'undefined'?self.soundsByURL[sURL]:null); } this.isChildOfNode = function(o,sNodeName) { if (!o || !o.parentNode) { return false; } sNodeName = sNodeName.toLowerCase(); do { o = o.parentNode; } while (o && o.parentNode && o.nodeName.toLowerCase() != sNodeName); return (o.nodeName.toLowerCase() == sNodeName?o:null); } this.events = { // handlers for sound events as they're started/stopped/played play: function() { pl.removeClass(this._data.oLink,this._data.className); this._data.className = pl.css.sPlaying; pl.addClass(this._data.oLink,this._data.className); }, stop: function() { pl.removeClass(this._data.oLink,this._data.className); this._data.className = ''; }, pause: function() { pl.removeClass(this._data.oLink,this._data.className); this._data.className = pl.css.sPaused; pl.addClass(this._data.oLink,this._data.className); }, resume: function() { pl.removeClass(this._data.oLink,this._data.className); this._data.className = pl.css.sPlaying; pl.addClass(this._data.oLink,this._data.className); }, finish: function() { pl.removeClass(this._data.oLink,this._data.className); this._data.className = ''; if (pl.config.playNext) { var nextLink = (pl.indexByURL[this._data.oLink.href]+1); if (nextLink1) { // ignore right-click return true; } var o = self.getTheDamnLink(e); if (o.nodeName.toLowerCase() != 'a') { o = self.isChildOfNode(o,'a'); if (!o) return true; } var sURL = o.getAttribute('href'); if (!o.href || (!sm.canPlayLink(o) && !self.classContains(o,self.playableClass)) || self.classContains(o,self.excludeClass)) { return true; // pass-thru for non-MP3/non-links } var soundURL = (o.href); var thisSound = self.getSoundByURL(soundURL); if (thisSound) { // already exists if (thisSound == self.lastSound) { // and was playing (or paused) thisSound.togglePause(); } else { // different sound sm._writeDebug('sound different than last sound: '+self.lastSound.id); if (self.lastSound) { self.stopSound(self.lastSound); } thisSound.togglePause(); // start playing current } } else { // stop last sound if (self.lastSound) { self.stopSound(self.lastSound); } // create sound thisSound = sm.createSound({ id:'inlineMP3Sound'+(self.soundCount++), url:soundURL, onplay:self.events.play, onstop:self.events.stop, onpause:self.events.pause, onresume:self.events.resume, onfinish:self.events.finish, type:(o.type||null) }); // tack on some custom data thisSound._data = { oLink: o, // DOM node for reference within SM2 object event handlers className: self.css.sPlaying }; self.soundsByURL[soundURL] = thisSound; self.sounds.push(thisSound); thisSound.play(); } self.lastSound = thisSound; // reference for next call if (typeof e != 'undefined' && typeof e.preventDefault != 'undefined') { e.preventDefault(); } else { event.returnValue = false; } return false; } this.stopSound = function(oSound) { soundManager.stop(oSound.id); soundManager.unload(oSound.id); } this.init = function() { sm._writeDebug('inlinePlayer.init()'); var oLinks = document.getElementsByTagName('a'); // grab all links, look for .mp3 var foundItems = 0; for (var i=0, j=oLinks.length; i0) { self.addEventHandler(document,'click',self.handleClick); if (self.config.autoPlay) { self.handleClick({target:self.links[0],preventDefault:function(){}}); } } sm._writeDebug('inlinePlayer.init(): Found '+foundItems+' relevant items.'); } this.init(); } var inlinePlayer = null; soundManager.setup({ // disable or enable debug output debugMode: true, // use HTML5 audio for MP3/MP4, if available preferFlash: false, useFlashBlock: true, // path to directory containing SM2 SWF url: '../../swf/', // optional: enable MPEG-4/AAC support (requires flash 9) flashVersion: 9 }); // ---- soundManager.onready(function() { // soundManager.createSound() etc. may now be called inlinePlayer = new InlinePlayer(); });
SITO in ALLESTIMENTO
Eventuali violazioni ai DIRITTI d'AUTORE, se DEBITAMENTE SEGNALATE a ezio1944@gmail.com - VERRANNO IMMEDIATAMENTE RIMOSSE
Torna ai contenuti