Снимок экрана
При просмотре кода в окне браузера Заголовок:
<h1>Music</h1>
<h2>w</h2>
<h2>a</h2>
<h2>s</h2>
<h2>d</h2>
<h2>z</h2>
<h2>x</h2>
<h2>C</h2>
не отображается на странице, я не понимаю, почему?Я написал разные версии кода, я сослался на них в js через element.innerHTML и т. Д., Элементы появляются, НО тогда звук не звучит.Кто-нибудь может помочь?Нужен массив для этих элементов в JS?Заранее спасибо за ваш ответ.
</head>
<body id='audios'>
<div class="container">
<h1>Music</h1>
<h2>Q</h2>
<button id="play">Play</button>
<button id="pause">Pause</button>
<h2>W</h2>
<button id="play">Play</button>
<button id="pause">Pause</button>
<h2>E</h2>
<button id="play">Play</button>
<button id="pause">Pause</button>
<h2>A</h2>
<button id="play">Play</button>
<button id="pause">Pause</button>
//$(document).ready(function(){
// $("h1").html("Hello world!")
//});
var addresses = ["https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3", "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3"];
var body = document.getElementById("audios");
let audiohtml = [];
addresses.map((address, i)=> {
audiohtml.push(`<audio id='myAudio${i}' src=${address} preload='auto'></audio>
<button onClick=togglePlay(${i})>Play</button>
<button onClick=togglePause(${i})>Pause</button>`)
});
body.innerHTML= audiohtml;
function togglePlay(i) {
var myAudio = document.getElementById(`myAudio${i}`);
myAudio.play();
};
function togglePause(i) {
var myAudio = document.getElementById(`myAudio${i}`);
myAudio.pause()
};