使用flash插件在HTML上播放音频

原文链接:WordPress Audio Player 非插件方式使用方法


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

  1. Download the zip file
  2. Extract and upload the files to your server (only two files are required: audio-player.js and player.swf)
  3. Include the audio-player.js file in the HEAD section of your html page
  4. Still in the HEAD section, setup Audio Player as seen in the example below (the only required option is width)
  5. 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
  6. 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)
  7. 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.

  1. <html>  
  2.     <head>  
  3.         <title>Your website</title>  
  4.   
  5.         ...  
  6.   
  7.         <script type="text/javascript" src="path/to/audio-player.js"></script>  
  8.         <script type="text/javascript">  
  9.             AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {  
  10.                 width: 290  
  11.             });  
  12.         </script>  
  13.   
  14.     </head>  
  15.     <body>  
  16.   
  17.         <p id="audioplayer_1">Alternative content</p>  
  18.         <script type="text/javascript">  
  19.         AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
  20.         </script>  
  21.   
  22.         <p id="audioplayer_2">Alternative content</p>  
  23.         <script type="text/javascript">  
  24.         AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});  
  25.         </script>  
  26.   
  27.     </body>  
  28. </html>  

Configuration

You can configure Audio Player with the setup call in the HEAD section like this:

  1. <script type="text/javascript" src="path/to/audio-player.js"></script>  
  2. <script type="text/javascript">  
  3.     AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {  
  4.         width: 290,  
  5.         initialvolume: 100,  
  6.         transparentpagebg: "yes",  
  7.         left: "000000",  
  8.         lefticon: "FFFFFF"  
  9.     });  
  10. </script>  

You can configure each separate player using the embed call like this:

  1. <script type="text/javascript">  
  2. AudioPlayer.embed("audioplayer_1", {  
  3.     soundFile: "http://yoursite.com/path/to/mp3_file.mp3",  
  4.     titles: "Title",  
  5.     artists: "Artist name",  
  6.     autostart: "yes"  
  7. });  
  8. </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:

  1. <script type="text/javascript">  
  2. AudioPlayer.embed("audioplayer_1", {  
  3.     soundFile: "http://yoursite.com/path/to/mp3_file_1.mp3,http://yoursite.com/path/to/mp3_file_2.mp3",  
  4.     titles: "Title 1,Title 2",  
  5.     artists: "Artist name 1,Artist name 2"  
  6. });  
  7. </script>

 

List of options

Tracks

OptionDefaultDescription
soundFilerequiredcomma-delimited list of mp3 files
titlesoverrides ID3 informationcomma-delimited list of titles
artistsoverrides ID3 informationcomma-delimited list of artists

Options

OptionDefaultDescription
autostartnoif yes, player starts automatically
loopnoif yes, player loops
animationyesif no, player is always open
remainingnoif yes, shows remaining track time rather than ellapsed time
noinfonoif yes, disables the track information display
initialvolume60initial volume level (from 0 to 100)
buffer5buffering time in seconds
encodenoindicates that the mp3 file urls are encoded
checkpolicynotells 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)
rtlnoswitches the layout to RTL (right to left) for Hebrew and Arabic languages

Flash player options

OptionDefaultDescription
widthrequiredwidth of the player. e.g. 290 (290 pixels) or 100%
transparentpagebgnoif yes, the player background is transparent (matches the page background)
pagebgNAplayer 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.

OptionDefaultDescription
bgE5E5E5Background
leftbgCCCCCCSpeaker icon/Volume control background
lefticon333333Speaker icon
voltrackF2F2F2Volume track
volslider666666Volume slider
rightbgB4B4B4Play/Pause button background
rightbghover999999Play/Pause button background (hover state)
righticon333333Play/Pause icon
righticonhoverFFFFFFPlay/Pause icon (hover state)
loader009900Loading bar
trackFFFFFFLoading/Progress bar track backgrounds
trackerDDDDDDProgress track
borderCCCCCCProgress bar border
skip666666Previous/Next skip buttons
text333333Text

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值