Question

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

HTML

<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({ ... });

自定义音频播放器JS＆amp; amp; CSS

2 个答案: