WordPress Audio Player 非插件方式使用方法
2011-01-26 13:53
781 查看
Standalone version
The standalone version comes with a JavaScript file to simplify configuring and embedding the player. This file includes theswfobject library.Note: the zip file includes two other files:
audio-player-noswfobject.js (a version of audio-player.js without the swfobject library if you are including it separately)
audio-player-uncompressed.js (same as above but uncompressed so you can read the code)
Installation and usage
Download the zip fileExtract and upload the files to your server (only two files are required: audio-player.js and player.swf)
Include the audio-player.js file in the HEAD section of your html page
Still in the HEAD section, setup Audio Player as seen in the example below (the only required option is width)
To insert a player on the page, place an HTML element (a P tag in the example but it can be anything) and give it a unique ID
This element will be replaced with a player. If the browser doesn’t support Audio Player, the element will not be replaced so use it to show alternative content (maybe a message telling the user to download Flash)
Insert the script tag after the element as shown below
Example
Ensure you replace “http://yoursite.com/path/to” with the correct paths to all files.<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>
Configuration
You can configure Audio Player with the setup call in the HEAD section like this:<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>
You can configure each separate player using the embed call like this:
<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>
To load multiple files
Simply set soundFile to a comma delimited list of mp3 files. Optionally, you can also provide a comma delimited list of titles and artists:<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {
soundFile: "http://yoursite.com/path/to/mp3_file_1.mp3,http://yoursite.com/path/to/mp3_file_2.mp3",
titles: "Title 1,Title 2",
artists: "Artist name 1,Artist name 2"
});
</script>
List of options
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 |
相关文章推荐
- WordPress audio player 的使用方法
- ecliipse下安装插件的三种方法&amp;使用links方式安装Eclipse插件
- jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
- wordpress中不使用插件添加文章浏览数及评论数的方法。
- WordPress 插件――CoolCode使用方法与下载
- unity3d AudioToolKit 音频管理插件使用方法
- WordPress代码高亮插件CodeColorer正确使用方法
- ecliipse下安装插件的三种方法&amp;amp;使用links方式安装Eclipse插件
- 在WordPress中安装使用视频播放器插件Hana Flv Player
- WordPress中wp-Syntax插件使用方法
- maven使用exec插件运行Java main方法,以下是3种不同的操作方式。
- WordPress 插件――CoolCode使用方法与下载
- WP Page Numbers – wordpress分页导航插件使用方法与教程
- 在wordpress中使用 markdown:wp-markdown插件的使用方法
- MVC中处理表单提交的方式(使用html扩展方法+juqery插件)
- WordPress mb.miniAudioPlayer插件多个跨站脚本漏洞
- 海思平台以插件方式使用Graphics Driver方法移植QT4.8.6
- 黄聪:WordPress制作插件中使用wp_enqueue_script('jquery')库不起作用解决方法
- 在WordPress中安装使用视频播放器插件Hana Flv Player
- wordpress分页方法,不使用插件