Использование mediaelement для отображения галереи аудио

Привет, я создаю тему для мультимедийных услуг, и мне нужна галерея аудио. Я ищу способ использовать встроенный медиаплеер. Это «вид» работает, но у меня есть несколько вопросов …

Мне нужно несколько игроков, потому что каждый проигрыватель отображает другой звук. Сценарий, который я использую, «захватывает» игрока по его идентификатору, но я думаю, что каждое сообщение (из типа сообщения) является динамическим, поэтому я теряюсь, не зная, как вызвать переменную php внутри js.

Поскольку он захватывает игрока по его идентификатору, первый игрок показывает и играет, и все, кроме других, не работает.

Часть моего короткого кода такова:

<?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 }); }); 

Может ли кто-нибудь указать мне в правильном направлении? Благодаря!

Solutions Collecting From Web of "Использование mediaelement для отображения галереи аудио"

Похоже, вам нужно настроить его с уникальными идентификаторами для каждого аудиоплеера.

Попробуйте изменить свой 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 --> 

Это должно дать каждому аудиоплееру уникальный идентификатор.

Затем, в вашем 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 }); } 

Я не тестировал это, но похоже, что он должен работать.