I'm trying to load different sounds (.mp3 audio) on different audio players appeared on one HTML page. That is, the length of the array determines the number of players appeared on the screen. So, in this example I have 3 elements in the array. Therefore, 3 audio players playing 3 different things.
I've managed to place 3 players on the page one underneath each other as I did for their equivalent texts (Animals sounds) but I'm facing the following problems:
Each player is playing the same sound rather incrementing and playing each for different player. I used a "for loop" to increment through the array, but I couldn't find a way to let it "remember" the old audio so it always plays the last sound through all players. In this case it only plays "Cat".
Even when I click on the empty line, between the 1st and 2nd player, where there's no audio player - the sound is still playing and I can't figure out why...
I would appreciate very much any help!!!
//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>P.S
The audio tags must not be the standard one with play/pause appeared as default. I used my own player logo but for this example I linked a logo from an absolute URL.
I tried to use hints from this other post (multiple and dynamic audio players applied for a dictionary in HTML/JavaScript) but that didn't work so well. I tried to use
var audio = new Audio(); and
player.parentNode.insertBefore(audio , player.nextNode);
to solve problem 1. Not sure, maybe because didn't use the standard player?
