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

Question

Hi guys I need some help: 嗨，我需要一些帮助：

Im planning on including multiple media players on my site, each with different mp3 tracks that can be played. 我打算在我的网站上包括多个媒体播放器，每个媒体播放器都可以播放不同的mp3曲目。 I've managed to create a custom audio player using Javascript Media elements and the "audio" tag. 我设法使用Javascript Media元素和“ audio”标签创建了一个自定义音频播放器。

However, when I try to create a new audio tag, the new player assumes the format of the default browser audio player rather than following the custom player decorators. 但是，当我尝试创建新的音频标签时，新播放器采用默认浏览器音频播放器的格式，而不是遵循自定义播放器装饰器。

Here is a link to a screenshot of the problem I'm having: 这是我遇到的问题的屏幕截图的链接：

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

What i would like to know is, how do I create multiple instances of a custom audio player, each with their own independent mp3 sources and that can be played at the same time? 我想知道的是，如何创建一个自定义音频播放器的多个实例，每个实例都具有自己的独立mp3源，并且可以同时播放？

Here is my HTML markup: 这是我的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>

AND HERE IS MY CSS: 这是我的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

Apart from not using the same ID on several elements (IDs must be unique), you only need to initialize the audio element like 除了不在多个元素上使用相同的ID （ID必须是唯一的）外，您只需要初始化audio元素，例如

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

See JSFIDDLE 参见JSFIDDLE

Notice that you don't actually need to initialize each element individually. 请注意 ，您实际上并不需要单独初始化每个元素。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-17 16:19:40

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-17 16:19:40

解决方案1
0 已采纳 2014-07-17 16:19:40