satan 通过 Google 阅读器发送给您的内容：
于 12-5-20 通过 善始善终 作者：Mr.Wang
今天给大家分享一款非常漂亮的网页音乐播放器：audio player ,谈到audio player相信很多朋友都很熟悉了，肯定很多朋友还在使用，前面我给大家分享过audio player的wordpress插件版本，让大家博客中可以直接插入音乐，今天给大家说说audio player网页版音乐播放器的实现方法，让大家以后只做网页时可以直接引用这个播放器样式！最后会把代码分享给大家！
首先，必要文件：audio player.js （效果实现js）
演示：
然后做个实际例子：
- <html>
- <head>
- <title>Your website</title>
- …
- <script type="text/javascript" src="path/to/audio-player.js"></script>
- <script type="text/javascript">
- AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {
- width: 290
- });
- </script>
- </head>
- <body>
- <p id="audioplayer_1″>Alternative content</p>
- <script type="text/javascript">
- AudioPlayer.embed("audioplayer_1″, {soundFile: "http://yoursite.com/path/to/mp3_file.mp3″});
- </script>
- <p id="audioplayer_2″>Alternative content</p>
- <script type="text/javascript">
- AudioPlayer.embed("audioplayer_2″, {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3″});
- </script>
- </body>
- </html>
其中可以在script中设置样式以及各项功能：
- <script type="text/javascript" src="path/to/audio-player.js"></script>
- <script type="text/javascript">
- AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {
- width: 290,
- initialvolume: 100,
- transparentpagebg: "yes",
- left: "000000″,
- lefticon: "FFFFFF"
- });
- </script>
设置播放各项样式功能：
- <script type="text/javascript">
- AudioPlayer.embed("audioplayer_1″, {
- soundFile: "http://yoursite.com/path/to/mp3_file.mp3″,
- titles: "Title",
- artists: "Artist name",
- autostart: "yes"
- });
- </script>
下面是可以设置的栏目：
Tracks
| Option | Default | Description |
|---|---|---|
| soundFile | required | comma-delimited list of mp3 files |
| titles | overrides ID3 information | comma-delimited list of titles |
| artists | overrides ID3 information | comma-delimited list of artists |
Options
| Option | Default | Description |
|---|---|---|
| autostart | no | if yes, player starts automatically |
| loop | no | if yes, player loops |
| animation | yes | if no, player is always open |
| remaining | no | if yes, shows remaining track time rather than ellapsed time |
| noinfo | no | if yes, disables the track information display |
| initialvolume | 60 | initial volume level (from 0 to 100) |
| buffer | 5 | buffering time in seconds |
| encode | no | indicates that the mp3 file urls are encoded |
| checkpolicy | no | tells Flash to look for a policy file when loading mp3 files (this allows Flash to read ID3 tags from files hosted on a different domain) |
| rtl | no | switches the layout to RTL (right to left) for Hebrew and Arabic languages |
Flash player options
| Option | Default | Description |
|---|---|---|
| width | required | width of the player. e.g. 290 (290 pixels) or 100% |
| transparentpagebg | no | if yes, the player background is transparent (matches the page background) |
| pagebg | NA | player background color (set it to your page background when transparentbg is set to 'no') |
Colour scheme options
All colour codes must be 6-digit HEX codes without '#' or '0x' in front.
| Option | Default | Description |
|---|---|---|
| bg | E5E5E5 | Background |
| leftbg | CCCCCC | Speaker icon/Volume control background |
| lefticon | 333333 | Speaker icon |
| voltrack | F2F2F2 | Volume track |
| volslider | 666666 | Volume slider |
| rightbg | B4B4B4 | Play/Pause button background |
| rightbghover | 999999 | Play/Pause button background (hover state) |
| righticon | 333333 | Play/Pause icon |
| righticonhover | FFFFFF | Play/Pause icon (hover state) |
| loader | 009900 | Loading bar |
| track | FFFFFF | Loading/Progress bar track backgrounds |
| tracker | DDDDDD | Progress track |
| border | CCCCCC | Progress bar border |
| skip | 666666 | Previous/Next skip buttons |
| text | 333333 | Text |
最后，附上js文件和我做的一个实例
可从此处完成的操作：
- 使用 Google 阅读器订阅善始善终
- 开始使用 Google 阅读器，轻松地与您喜爱的所有网站保持同步更新
没有评论:
发表评论