Софт для iPhone, iPod, iPad | Sasan Behroozian | Excel VBA Macro Programming

Using Speakker – Cool HTML5 Audio Player – Script Tutorials

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 9
 
  On Using Creating SearchGo XSLT Res MySQL AJAX JS PHPMay jQuery 5, 2011, HTML/CSS for Ð jQuery, Home TutorialsinKaleidoscope forPlayer(jQuery) Tutorialsyour own DevelopersAudio Player Image Today we continue jQuery lessons, ScriptSpeakkerWebCool HTML5resources, by admin zoom tool Ð jQuery imageLens iPhone and we will try new audioplayer Ð Speakker. This is free html5 audio player with have different It allow us to listen have adjust the to attach nice interface.covers (for media), andmusic,possi
Share
Transcript
  Script TutorialsTutorials for Web DevelopersHomeHTML/CSSjQueryPHPJSAJAXMySQLResXSLTSearchGoCreating your own Kaleidoscope for iPhone Image zoom tool Ð jQuery imageLensUsing Speakker Ð Cool HTML5 Audio PlayerOn May 5, 2011, in jQuery, resources, by adminUsing Speakker Ð Cool HTML5 Audio Player(jQuery) Today we continue jQuery lessons, and we will try new audioplayer Ð Speakker. This is free html5 audio player withnice interface. It allow us to listen music, adjust the volume,have different covers (for media), and have possibility to attach playlists (even via PHP files). Also [...]demo.26303shares0ShareUsing Speakker Ð Cool HTML5 Audio Player(jQuery)Today we continue jQuery lessons, and we will try new audioplayer Ð Speakker. This is free html5 audio player with niceinterface. It allow us to listen music, adjust the volume, havedifferent covers (for media), and have possibility to attachplaylists (even via PHP files). Also it have ready possibility toshare link to facebook and twitter. So Ð welcome to test our  Here are srcinal website of this player: http://www.speakker.com/. You always can download latest version here.Ok, here are our sample and downloadable package:Live Demodownload in packageOk, download the example files and lets start coding !Step 1. HTMLAs usual, we start with the HTML.This is our main page source code with both players.index.html! !2!9!:!C!O!P!Q!R ! 2 9 : C O P Q R2!2 #$%&'()*+,-./01#! #$,0345678471#!%&'1,,,,# ( $%1;<83==8>,?,@(ABC,3DEFG,<03H8>#I ( $%1,,,,#$()*,>8067J.H08J-88.7,->8K67LJJI/3F4MLJJ7,.H<867.8N.ILJJ7,/8EF367JL>88471,,,,,#$()*,>8067J.H08J-88.7,->8K67LJJIJ<83==8>MLJJ7,,.H<867.8N.ILJJ7,/8EF367JL>88 471,,,,#$()*,>8067J.H08J-88.7,->8K67LJJI/J<83==8>MLJJ7,.H<867.8N.ILJJ7,/8EF367JL>88471,,,,,#+,-(. ,.H<867.8N.IS3T3JL>F<.7,J>L67SJISUD8>HM/F4MSJ71#I+,-(. 1,,,,#+,-(. ,.H<867.8N.IS3T3JL>F<.7,J>L67SJI<>GS8==.G>M/F4MSJ71#I+,-(. 1,,,,#+,-(. ,.H<867.8N.IS3T3JL>F<.7,J>L67J<83==8>M/F4MSJ71#I+,-(. 1,,,,#+,-(. ,.H<867.8N.IS3T3JL>F<.7,J>L67SJI/3F4MSJ71#I+,-(. 1#I!%&'1#/0'11,,,,#'(2,L03JJ678N3/<0871,,,,,,,,#!31AF4F,<03H8>,8N3/<08,VKG>,JF4508,KF08W#I!31,,,,,,,,#'(2,L03JJ67J/300X<03H8>71#I'(21,,,,,#I'(21#I/0'11#I! #$1As you can see Ð I prepared only one DIV parent for small player, big player will appear in bottom by self.Step 2. CSSHere are used CSS styles.css/main.css 29:CY,Z#&-4()[!\.&''()4[!\/0-'%-[!]^GEHZ/&,*4-05)'[_888]M8N3/<08Z.0+( (0)[>803.FT8\/&,*4-05)'[_```\6(' ![OC!<N\!%(4! [2!!<N\70) 8+(9%[Q! a\/0-'%-[ <N,_!!!JG0FE\#&-4()[2!<N,3D.G\.&''()4[9!<N\?/Gb?^G>E8>?>3EFDJ[9<N\?c8^=F.?^G>E8>?>3EFDJ[9<N]MJ/300X<03H8>,Z7$0& [08K.\#&-4()8-(4! [ !!<N]MLGE8,Z7$0& [08K.]Other css files:css/mspeakker.css and css/speakker.css  Both files is part of speakker player (these files available in package)Step 3. JSHere are necessary JS files to our project.js/jquery.min.js and js/projekktor.min.jsThis is common files Ð jQuery library with our player. No need to show its full so urces here (pretty big). It alwaysavailable in packagespeakker.min.jsThis file belong to Speakker player too, and we should keep it in root folder (just because it will search flashapplication in ÔswfÕ folder). So please, keep it inroot toojs/main.js! #$%&'()*+,-./*0%1$! #$%&'#$-23!42222#$5.6)07789701*/5-.69*0::*/$3!;22222222<=7*>25%0,0?! .)9;[email protected]!A222222229&6,*/>25%0,0?'&B*/[email protected]!D22222222,=,7*>25E&+C2F [email protected]!G22222222,H*)*>257=CH,5!I2222J-K!L2222#$-.69*0::*/$3!M22222222<=7*>2597017=6,[email protected] !2222222297017=6,>2%( )@ 22222222,H*)*>25%0/:[email protected] 42222J-K ;J-KFor our demo Ð we will show two different players. First one (small) Ð can play sing le file, and second Ð big. It haveown playlist. Ok, when page loaded, we performing initializations of our players. Hope you already noticed differencesbetween both initializations. First one (small player) Ð we selecting (by jquery) exact element where will appear player.And in its params we pointing which MP3 file we will play, poster image, title.So about second player Ð we pointinglink to playlist generator, and set param ÔplaylistÕ into ÔtrueÕ. More details about possible params you will find in end ofour tutorial.Step 4. SWFSingle used flash swf file: (our player)swf/jarisplayer.swfStep 5. PHPThis file will generate us list of MP3 files (playlist) and print it via JSON.playlist.php! NO!42!;#0P*6(7,2Q2*((*+$!A2222597017=6,52QR2*((*+$!D222222225 52QR2*((*+$!G22222222222256/'52QR25%0,0?! .)9;[email protected],19*52QR250(%=&?)9;[email protected]  ! !.!=3!3?3A3D3E3F3 3.3=?!?3???A?D?E?F? ?.?=A!A3A?AAADAEAFA A.A=D!D3D?DADDDEDFD D.D=E!E3E?EAEDEEEFE E.E=F!F3############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*#3$4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4########$?$#+,#! !#############$67%$#+,#$89/9:!?<@5A$4#$/B51$#+,#$9C8)&:@5A$4############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*#?$4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4########$A$#+,#! !#############$67%$#+,#$89/9:!A<@5A$4#$/B51$#+,#$9C8)&:@5A$4############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*#A$4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4########$D$#+,#! !#############$67%$#+,#$89/9:!D<@5A$4#$/B51$#+,#$9C8)&:@5A$4############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*#D$4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4########$E$#+,#! !#############$67%$#+,#$89/9:!E<@5A$4#$/B51$#+,#$9C8)&:@5A$4############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*#E$4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4########$F$#+,#! !#############$67%$#+,#$89/9:!F<@5A$4#$/B51$#+,#$9C8)&:@5A$4############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*#F$4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4########$ $#+,#! !#############$67%$#+,#$89/9:! <@5A$4#$/B51$#+,#$9C8)&:@5A$4############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*# $4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4########$.$#+,#! !#############$67%$#+,#$89/9:!.<@5A$4#$/B51$#+,#$9C8)&:@5A$4############$%&'()*$#+,#! !#################$/)/01$#+,#$2&'*#.$4#$5&6/17$#+,#$89/9:%&;17<5'*$############>4########>4####>>G#H19817-IJ&'/1'/KLB51M#9550)%9/)&':N6&'I>G $%&' $()*+$-$217;)%16OP2QR<5H5$>GS&P6&'#+#*$,#217;)%16OP2QR->G1%H&#S&P6&'K,1'%&81-S9T16C0/>G#U,Services_JSON.php library available in package.Seems we quite finished. All media files I put to ÔdataÕ folder. This is our audio f iles Ð from 01.mp3 till 08.mp3, pluscover.pngIf you have own custom CMS, you even will albe to change generator of playlist to play any custom files (audioalbums of members as example) !And at last Ð table with all possible params (to current moment) of that Speakkerplayer:Param Type Description Sample
Related Search
Similar documents
View more
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks