WordPress Audio Player 非插件方式使用方法

最新推荐文章于 2024-04-18 10:18:00 发布

weixin_30881367

最新推荐文章于 2024-04-18 10:18:00 发布

阅读量212

点赞数

文章标签： php javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/noevil/archive/2011/01/26/1945390.html

版权

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 file
Extract 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

转载于:https://www.cnblogs.com/noevil/archive/2011/01/26/1945390.html

weixin_30881367

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WordPress Audio Player 非插件方式使用方法

Standalone versionThe standalone version comes with a JavaScript file to simplify configuring and embedding the player. This file includes theswfobjectlibrary.Note: the zip file includes two o...
复制链接

扫一扫