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

How do i create more than one instance of a custom HTML5 audio player using JavaScript Media Elements?

本文关键字：HTML5 自定义 一个 音频 播放器 实例 媒体 JavaScript 何使用 元素 创建      更新时间：2023-09-26

大家好，我需要一些帮助:

我计划在我的网站上包括多个媒体播放器，每个都有不同的mp3轨道，可以播放。我已经成功地使用Javascript媒体元素和"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%);
}

除了在多个元素上不使用相同的ID (id必须是唯一的)之外，您只需要初始化audio元素，如

$("audio").mediaelementplayer({
    // API options here
});
<<p>看到strong> JSFIDDLE

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

相关文章：