如何使用 JavaScript 媒体元素创建多个自定义 HTML5 音频播放器实例？答案

【问题标题】：How do i create more than one instance of a custom HTML5 audio player using JavaScript Media Elements?如何使用 JavaScript 媒体元素创建多个自定义 HTML5 音频播放器实例？
【发布时间】：2014-07-17 13:19:42
【问题描述】：

大家好，我需要帮助：

我计划在我的网站上添加多个媒体播放器，每个播放器都可以播放不同的 mp3 曲目。我已经设法使用 Javascript 媒体元素和“音频”标签创建了一个自定义音频播放器。

但是，当我尝试创建新的音频标签时，新播放器会采用默认浏览器音频播放器的格式，而不是遵循自定义播放器装饰器。

这是我遇到的问题的屏幕截图链接：

http://www.noodill.com/image/92046214053

我想知道的是，如何创建自定义音频播放器的多个实例，每个实例都有自己独立的 mp3 源并且可以同时播放？

这是我的 HTML 标记：

<!DOCTYPE html>

<html>
<head>
<title>Media Player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<link rel = "stylesheet" 
    type="text/css" 
    href="MediaPlayer.css">


</head>

<body>

<div id="PlayerContainer">
  <audio id="audio-player" src="source_1.mp3" type="audio/mp3" controls="controls">    </audio>  
</div>

<div id="PlayerContainer">
  <audio id="audio-player" src="source_2.mp3" type="audio/mp3" controls="controls">    </audio>  
</div>

<script>

$(function(){
  $('#audio-player').mediaelementplayer({
    alwaysShowControls: true,
    features: ['playpause','progress','volume'],
    audioVolume: 'horizontal',
    audioWidth: 450,
    audioHeight: 70,
    iPadUseNativeControls: true,
    iPhoneUseNativeControls: true,
    AndroidUseNativeControls: true
  });
});    

</script>

</body>
</html>

这是我的 CSS：

#PlayerContainer {
    height: 60px;
    width: 400px;
    border:3px dotted red;
    float: left;
    margin: 50px;
    position: relative;
    border-radius: 10px;
    }


.mejs-controls .mejs-button button {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  text-indent: -9999px;
  bottom: 0px;
  margin-left: 5px;

}

.mejs-controls .mejs-play button, .mejs-controls .mejs-pause button {
  width: 20px;
  height: 20px;
  bottom: 5px;
  left: 10px;
  background: orange;


}
.mejs-controls .mejs-pause button { background-position: 0 -35px; }


/* mute/unmute control */
.mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button {
  width: 20px;
  height: 20px;
  bottom: 5px;
  left: 30px;
  background: red;
  margin-left: 10px;
  padding: 0px;
}
.mejs-controls .mejs-unmute button { background-position: 0 -19px; }


/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
  position: absolute;
  bottom: 5px;
  left: 80px;
  cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  width: 120px;
  height: 11px;
  background: #212227;
  -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px     rgba(255,255,255,0.25);
  -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px     rgba(255,255,255,0.25);
  box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  position: absolute;
  width: 0;
  height: 9px;
  top: 1px;
  left: 1px;
  background: #90d26a;
  background: -webkit-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -moz-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -o-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -ms-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: linear-gradient(top, #90d26a 0%, #83bb63 100%);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/* time scrubber bar */
.mejs-controls div.mejs-time-rail { width: 380px; }

.mejs-controls .mejs-time-rail span {
 position: absolute;
  display: block;
  width: 380px;
  height: 12px;
  top: 5px;
  left: 10px;
  cursor: pointer;
  -webkit-border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 2px 2px;
  border-radius: 0px 0px 2px 2px;
}

.mejs-controls .mejs-time-rail .mejs-time-total { 
  background: #565860; 
  width: 380px !important; /* fixes display bug using jQuery 1.8+ */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
  top: 0;
  left: 0;
  width: 0;
  background: #7b7d82;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
  top: 0;
  left: 0;
  width: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #90d26a;
  background: -webkit-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -moz-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -o-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -ms-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: linear-gradient(top, #90d26a 0%, #83bb63 100%);
}

【问题讨论】：

为什么你有 2 个具有相同 ID 的 Div？ ID 应该是唯一的。还：当你创建一个新标签时，你是否应用了一个 mediaelementplayer 的新实例？似乎您可能会因为选择器错误而遇到问题？可以把它们改成类吗？
我忘了说我是编程新手，我将如何创建一个新的 mediaelementplayer 实例？非常感谢！
@Fallenreaper 我忘了说我是编程新手，我将如何创建一个新的 mediaelementplayer 实例？非常感谢！
如果您创建一个新元素，您需要确保将您定义的函数应用于它。例如：var newA = $("<audio />").mediaelementplayer({}); $("body").append(newA);
@Fallenreaper 非常感谢兄弟！这真的很有帮助！我非常感谢您的帮助！

标签： javascript html audio mp3 mediaelement.js

【解决方案1】：

除了在多个元素上不使用相同的ID（ID必须唯一），你只需要像初始化audio元素一样

$("audio").mediaelementplayer({
    // API options here
});

见JSFIDDLE

请注意，您实际上并不需要单独初始化每个元素。

【讨论】：