定制音频播放器JS和CSS的问题

Question

我正在尝试创建一个包含12个不同声音文件的页面，并能够使用自定义音频播放器为每个文件播放、暂停、处理和静音。我已经创建了一个自定义的音频播放器类，但是让每个文件工作的唯一方法是给他们自己的ID，然后每次调用一个新函数。是否有一个更干净的方法来做到这一点，而不是让相同的功能重复12次？

<div id="column1">   
<ol>
    <li>
    <span class="name">Diaphragmatic Breathing</span>           
    <span class ="info"> -  Dr. Allan Vives,  Georgia Southern University</span> 
    <span class="time">(<a class = "readmore" href="http://studentsupport.georgiasouthern.edu/counseling/resources/self-help/relaxation-and-stress-management/" target="_blank"> Read More</a>, 9:15 Mins, 12.6MB)</span>

      <div class="audio-player">
      <audio id="audio-player" src="../audio/breathing/Diaphragmatic Breathing.mp3" type="audio/mp3" controls="controls"></audio>
      </div>        
    </li>
    </ol>

</div>    
<div id="column2">
    <ol>
        <li>
        <span class="name">Breathing Relaxation Exercise 4-6-8 </span>          
        <span class ="info"> - Jason Sackett, University of Southern California</span> 
        <span class="time">(<a class = "readmore" href="http://www.usc.edu/programs/cwfl/wellness/relaxation.html" target="_blank"> Read More</a>, 2:33 Mins, 2.9MB)</span>

          <div class="audio-player1">
          <audio id="audio-player" src="../audio/breathing/breathing_relaxation_exercise-4-6-8.mp3" type="audio/mp3" controls="controls"></audio>
          </div>        
        </li>


    </ol>
</div>   

<script type="text/javascript">
$(function(){
  $('#audio-player1').mediaelementplayer({
    alwaysShowControls: true,
    features: ['playpause', 'progress','volume'],
    audioWidth: 450,
    audioHeight: 70,
    iPadUseNativeControls: true,
    iPhoneUseNativeControls: true,
    AndroidUseNativeControls: true
  });
});

</script>

    <script type="text/javascript">
$(function(){
  $('#audio-player2').mediaelementplayer({
    alwaysShowControls: true,
    features: ['playpause', 'progress','volume'],
    audioWidth: 450,
    audioHeight: 70,
    iPadUseNativeControls: true,
    iPhoneUseNativeControls: true,
    AndroidUseNativeControls: true
  });
});

</script>

    <script type="text/javascript">
$(function(){
  $('#audio-player3').mediaelementplayer({
    alwaysShowControls: true,
    features: ['playpause', 'progress','volume'],
    audioWidth: 450,
    audioHeight: 70,
    iPadUseNativeControls: true,
    iPhoneUseNativeControls: true,
    AndroidUseNativeControls: true
  });
});

</script>

Answer 1

与其对每个元素使用id，不如给它们所有相同的类，然后只需要这样做一次：

$(function(){
  $('.className').mediaelementplayer({
    alwaysShowControls: true,
    features: ['playpause', 'progress','volume'],
    audioWidth: 450,
    audioHeight: 70,
    iPadUseNativeControls: true,
    iPhoneUseNativeControls: true,
    AndroidUseNativeControls: true
  });
});

其中.className是您选择给元素的任何类。

Answer 2

或者，如果您不想触摸标记，可以通过将选择器的更改为

$("#audio-player1").mediaelementplayer({ ... });

至

// add this range generator
var fn = function(t,n,i){ return i>=n ? (t+n+" "+fn(t,n+1,i)) : ""; }
// use it to get a selector for all elements matching the resulting pattern
$(fn("#audio_player",1,12)).mediaelementplayer({ ... });