Question

大家好我需要一些帮助：

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

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

以下链接指向我遇到的问题的屏幕截图：

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

Answer 1

除了在几个元素上不使用相同的ID（ID必须是唯一的）之外，您只需初始化audio元素，如

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

参见 JSFIDDLE

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

如何使用JavaScript Media Elements创建多个自定义HTML5音频播放器实例？

1 个答案: