Wordpress 音频播放器 Wordpress audio player with jQuery audioplayer.swf
2014-08-25 21:55
609 查看
原文地址:http://justcoding.iteye.com/blog/545978
<!-- SECTION "Wordpress audio player with jQuery" [1-272] -->
HTML
Java代码
<a class="audio" href="audio/reason.mp3">
Audio: An Electronic Reason
</a>
Javascript
<!-- SECTION "Example 1: basic" [273-705] -->
Java代码
$('.audio').each(function(){
audio_file = $(this).attr('href');
$(this).flash(
{
swf: 'flash/audioplayer.swf',
flashvars:
{
soundFile: audio_file
}
}
);
});
Javascript
<!-- SECTION "Example 2: several synchronized players" [706-1488] -->
Java代码
// close other audio players
// called by audio player when click on play button
function ap_stopAll(player_id)
{
$('.audio').each(function(){
if($(this).attr('href') != player_id)
{
$(this).find('object')[0].SetVariable("closePlayer", 1);
}
else
{
$(this).find('object')[0].SetVariable("closePlayer", 0);
}
});
}
$(document).ready(function() {
$('.audio').each(function(){
audio_file = $(this).attr('href');
$(this).flash(
{
swf: 'flash/audioplayer.swf',
flashvars:
{
playerID: "'" + audio_file + "'",
soundFile: audio_file
}
}
);
});
});
players are given an id upon initialization
when click on play button, player calls
ap_stopAll(): stops all players but the one with this id
the id here is the audio file path, but anything else is possible.
<!-- SECTION "Notes" [1489-1786] -->
HTML
Java代码
<p>
<a class="audio" href="audio/reason.mp3" id="reason">
Audio: An Electronic Reason
</a>
</p>
<p>
<a class="audio" href="audio/sunday.mp3" id="sunday">
Audio: By Sunday Afternoon
</a>
</p>
Javascript
Java代码
// close other audio players
// called by audio player when click on play button
function ap_stopAll(player_id)
{
$('.audio_flash').each(function(){
if($(this).attr('id') != player_id)
{
$(this).find('object')[0].SetVariable("closePlayer", 1);
}
else
{
$(this).find('object')[0].SetVariable("closePlayer", 0);
}
});
}
$(document).ready(function() {
$('.audio').each(function() {
audio_file = $(this).attr('href');
audio_title = $(this).text();
audio_id = $(this).attr('id');
div = $('<div class="audio_flash" id="' + audio_id + '"></div>');
$(this).after(div);
$(this).after(audio_title);
$(this).remove();
div.flash(
{
swf: 'flash/audioplayer.swf',
flashvars:
{
soundFile: audio_file,
playerID: "'" + audio_id + "'",
quality: 'high',
lefticon: '0xFFFFFF',
righticon: '0xFFFFFF',
leftbg: '0x357CCE',
rightbg: '0x32BD63',
rightbghover: '0x2C9D54',
wmode: 'transparent'
},
height: 50
}
);
});
});
<!-- SECTION "Example 3: real world" [1787-3238] -->
the appearance can be customized with many options (bottom of the page).
the default white space before and after the player is reduced by the “height” Flash parameter.
use of a custom id (set on the HTML link)
<!-- SECTION "Notes" [3239-3682] -->
<!-- SECTION "Download" [3683-] -->
Wordpress audio player with jQuery
How to use Wordpress audio player (standalone version) with jQuery and jQuery SWFObject (progressive enhancement).<!-- SECTION "Wordpress audio player with jQuery" [1-272] -->
Example 1: basic
View demoHTML
Java代码
<a class="audio" href="audio/reason.mp3">
Audio: An Electronic Reason
</a>
Javascript
<!-- SECTION "Example 1: basic" [273-705] -->
Java代码
$('.audio').each(function(){
audio_file = $(this).attr('href');
$(this).flash(
{
swf: 'flash/audioplayer.swf',
flashvars:
{
soundFile: audio_file
}
}
);
});
Example 2: several synchronized players
View demoJavascript
<!-- SECTION "Example 2: several synchronized players" [706-1488] -->
Java代码
// close other audio players
// called by audio player when click on play button
function ap_stopAll(player_id)
{
$('.audio').each(function(){
if($(this).attr('href') != player_id)
{
$(this).find('object')[0].SetVariable("closePlayer", 1);
}
else
{
$(this).find('object')[0].SetVariable("closePlayer", 0);
}
});
}
$(document).ready(function() {
$('.audio').each(function(){
audio_file = $(this).attr('href');
$(this).flash(
{
swf: 'flash/audioplayer.swf',
flashvars:
{
playerID: "'" + audio_file + "'",
soundFile: audio_file
}
}
);
});
});
Notes
How it works:players are given an id upon initialization
when click on play button, player calls
ap_stopAll()with its id as parameter
ap_stopAll(): stops all players but the one with this id
the id here is the audio file path, but anything else is possible.
<!-- SECTION "Notes" [1489-1786] -->
Example 3: real world
View demoHTML
Java代码
<p>
<a class="audio" href="audio/reason.mp3" id="reason">
Audio: An Electronic Reason
</a>
</p>
<p>
<a class="audio" href="audio/sunday.mp3" id="sunday">
Audio: By Sunday Afternoon
</a>
</p>
Javascript
Java代码
// close other audio players
// called by audio player when click on play button
function ap_stopAll(player_id)
{
$('.audio_flash').each(function(){
if($(this).attr('id') != player_id)
{
$(this).find('object')[0].SetVariable("closePlayer", 1);
}
else
{
$(this).find('object')[0].SetVariable("closePlayer", 0);
}
});
}
$(document).ready(function() {
$('.audio').each(function() {
audio_file = $(this).attr('href');
audio_title = $(this).text();
audio_id = $(this).attr('id');
div = $('<div class="audio_flash" id="' + audio_id + '"></div>');
$(this).after(div);
$(this).after(audio_title);
$(this).remove();
div.flash(
{
swf: 'flash/audioplayer.swf',
flashvars:
{
soundFile: audio_file,
playerID: "'" + audio_id + "'",
quality: 'high',
lefticon: '0xFFFFFF',
righticon: '0xFFFFFF',
leftbg: '0x357CCE',
rightbg: '0x32BD63',
rightbghover: '0x2C9D54',
wmode: 'transparent'
},
height: 50
}
);
});
});
<!-- SECTION "Example 3: real world" [1787-3238] -->
Notes
meaningful HTML: visitors without Javascript get a download link, otherwise it's replaced by plain text and the playerthe appearance can be customized with many options (bottom of the page).
the default white space before and after the player is reduced by the “height” Flash parameter.
use of a custom id (set on the HTML link)
<!-- SECTION "Notes" [3239-3682] -->
Download
Download all examples (ZIP, 1.4 MB)<!-- SECTION "Download" [3683-] -->
相关文章推荐
- Wordpress 音频播放器 Wordpress audio player with jQuery
- 【jquery】一款不错的音频播放器——Amazing Audio Player
- 支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js
- 支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js
- [CVE-2013-1464]WordPress Audio Player Plugin XSS in SWF利用
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件 - DragonDean
- 支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js
- 支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件
- AVAudioPlayer音频播放器—IOS开发
- (转载)How to create a mobile WordPress theme with jQuery Mobile
- WordPress audio player 的使用方法
- AVAudioPlayer音频播放器—IOS开发
- jQuery和HTML5音频播放器演示
- iOS学习——AVAudioPlayer播放本地音频
- AVAudioPlayer音频播放器—IOS开发
- AVAudioPlayer音频播放器—IOS开发
- IOS:AVAudioPlayer音频播放器
- 基于Ffmpeg解码器的简单播放器(a simple audio player based on Ffmpeg)
- 使用HTML5的Audio标签打造WEB音频播放器