你好，我正在为多媒体服务创建一个主题，我需要一个音频库。我正在寻找一种使用内置mediaelementplayer的方法。它“有点”管用，但我有几个问题。。。
我需要多个播放器，因为每个播放器显示不同的音频。我使用的脚本通过其ID“抓取”播放器，但我猜每个帖子（来自帖子类型）都是动态的，所以我不知道如何在我的js中调用php变量。
因为它通过ID抓取玩家，所以第一个玩家显示并播放所有内容，但其他玩家不工作。
我的部分短代码是：
<?php if(get_post_meta($value->ID, \'portfolio_audio\', true)!=\'\'){ ?>
<div class="audio-player">
<h2><?php echo $value->post_title?></h2>
<audio id="audio-player" src="<?php echo $audio_url; ?>" type="audio/mp3" controls="controls"></audio>
</div><!-- @end .audio-player -->
我的js在另一个文件中，是这样的：
$(function(){
$(\'#audio-player\').mediaelementplayer({
alwaysShowControls: true,
features: [\'playpause\',\'progress\',\'volume\'],
audioVolume: \'horizontal\',
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
});
有人能给我指出正确的方向吗？谢谢
SO网友:Aric Watson
听起来您需要为每个音频播放器设置唯一的ID。
尝试将您的PHP更改为：
<?php if(get_post_meta($value->ID, \'portfolio_audio\', true)!=\'\'){ ?>
<div class="audio-player">
<h2><?php echo $value->post_title?></h2>
<audio id="audio-player-<?php echo $value->ID; ?>" src="<?php echo $audio_url; ?>" type="audio/mp3" controls="controls"></audio>
</div><!-- @end .audio-player -->
这应该给每个音频播放器一个唯一的ID。
然后，在javascript中，您需要遍历页面上的所有音频播放器，并在每个播放器上设置mediaelementplayer。尝试以下操作：
$( document ).ready(function() {
/* -- loop through each player on the page and find it\'s ID -- */
$(\'.audio-player\').each(function(){
var player_id = $(this).attr(\'id\');
setupPlayer(player_id); // call this new function to setup the player
});
});
function setupPlayer(player_id) {
$(player_id).mediaelementplayer({
alwaysShowControls: true,
features: [\'playpause\',\'progress\',\'volume\'],
audioVolume: \'horizontal\',
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
}
我还没有测试过这个，但它似乎应该可以工作。
