【发布时间】：2016-02-20 22:33:13
【问题描述】：
我正在尝试在一个 HTML 页面上出现的不同音频播放器上加载不同的声音（.mp3 音频）。也就是说，数组的长度决定了屏幕上出现的玩家数量。所以，在这个例子中，我在数组中有 3 个元素。因此，3 个音频播放器播放 3 种不同的东西。
我已经设法将 3 个玩家放在第一页上，就像我为他们的等效文本（动物声音）所做的那样，但 我面临以下问题：
每个播放器播放相同的声音，而不是递增并为不同的播放器播放每个播放器。 我使用“for循环”来增加数组，但我找不到让它“记住”旧音频的方法，所以它总是通过所有播放器播放最后一个声音。在这种情况下，它只播放“猫”。
即使我点击空行，在第一个和第二个播放器之间，没有音频播放器 - 声音仍在播放，我不知道为什么.. .
我将非常感谢任何帮助！！！
//use JQuery to grab the audioID and play the audio
jQuery(document).ready(function() {
var speakWord = document.getElementsByClassName('speakout');
var nowPlaying = speakWord[0];
nowPlaying.load();
$("#divAudio").on("click", function() {
nowPlaying.play();
});
});
var textBox = document.getElementById('inBox'); //Responsible for printing words
var player = document.getElementById('myPlayer'); //PLAYING the sound (<audio>)
var outArr = ['Dog', 'Cow','Cat'];
var pathArr = ['http://cd.textfiles.com/mmplus/MEDIA/WAV/EFFECTS/BARK.WAV', 'http://www.internetstart.se/download/ljud/moo.wav', 'http://area512.htmlplanet.com/wavs/blackcat.wav'];
var audioLogo = document.getElementById('divAudio'); //for the APPEREANCE of the audio player (LOGO)
var img_audio = document.createElement("IMG"); // properties of the IMAGE
br = document.createElement("br"); //creating a break in the document
var new_audio = document.createElement("audio");
var points = 50;
if(outArr.constructor === Array) {
//audioLogo.style.display = "initial";
for(i=0; i < outArr.length; ++i) {
//regarding the TEXT elements:
textBox.innerHTML += outArr[i]+'<br>';
textBox.style.fontSize = "30px";
textBox.style.position = "absolute";
textBox.style.top = String(points)+'pt';
textBox.style.marginRight= "5pt";
textBox.style.lineHeight = "71pt";
textBox.style.right = '5pt';
}
}
else {
textBox.innerHTML += outArr;
textBox.style.fontSize = "30px";
textBox.style.position = "absolute";
textBox.style.top = "76pt";
}
var points = 70;
for(i=0; i < pathArr.length; ++i) {
var new_audio = document.createElement("audio");
var multiAud = audioLogo.querySelectorAll('.multiple_audio');
imgArr = Array(pathArr.length).fill('http://www.coli.uni-saarland.de/~andreeva/powin/images/sound.png');
if(i<1){
img_audio.style.height = "9%"; //the size of the audio logo
img_audio.style.width = "9%";
img_audio.setAttribute("src", imgArr[i]); //creating an attribute (image) to be added to doc
audioLogo.style.position = "absolute";
audioLogo.style.top = '58pt';
audioLogo.style.lineHeight = "73pt";
player.src = pathArr[i];
audioLogo.appendChild(img_audio);
audioLogo.innerHTML += '<br>';
}
else {
var audio = new Audio(pathArr[i]);
audio.className = 'multiple_audio';
img_audio.style.height = "9%";
img_audio.style.width = "9%";
img_audio.setAttribute("src", imgArr[i]); //creating an attribute (image) to be added to doc
audioLogo.style.position = "absolute";
audioLogo.style.top = '58pt';
audioLogo.style.lineHeight = "73pt";
audioLogo.appendChild(img_audio);
player.src = pathArr[i];
audioLogo.innerHTML += '<br>';
//player.parentNode.insertBefore(audio , player.nextNode);
}
}#layout {
position: relative;
overflow: auto;
left: 225px;
width: 800px;
height: 370px;
background-color: white;
padding-left: 1px;
max-width:100%;
}
#myText {
pointer-events: none;
width: 800px;
height: 370px;
resize: none;
font-size: 45px;
font-family: Arial, Helvetica, Verdana;
background: url(https://qph.is.quoracdn.net/main-qimg-47327da6ae3e0b3727a9b9a7ea7f1adb?convert_to_webp=true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
</head>
<body>
<br>
<div id="layout" readonly="readonly">
<div contenteditable maxlength="200" readonly="readonly" id="myText" dir="auto" name="outtest" class = "fetchBox"></div>
<div id="inBox" class="fetch" dir="auto"></div>
<audio class="speakout" id="myPlayer">
Your Browser does not support the HTML audio Tag!
</audio>
<div class="play" id="divAudio"><img id="play_image"> </div>
</div>
</body>
</html>附言
音频标签不能是标准的，默认显示为播放/暂停。我使用了自己的播放器徽标，但在本示例中，我从绝对 URL 链接了一个徽标。
-
我尝试使用其他帖子中的提示 (multiple and dynamic audio players applied for a dictionary in HTML/JavaScript) 但这并没有那么好。我尝试使用
var audio = new Audio(); 和
player.parentNode.insertBefore(audio, player.nextNode);
解决问题1。 不确定，可能是因为没有使用标准播放器？
【问题讨论】：
标签： javascript html css audio