воспроизведение аудио на сайте по клику без ссылки

Question

Каким тегом можно воспользоваться, чтобы аудио воспроизводилось прямо на сайте по клику на значок воспроизведения? как здесь: https://dictionary.cambridge.org/dictionary/english-russian/dictionary
<a href> воспроизводит в отдельном окне, <audio>, использованный отдельно, просто вставляет плеер, <img> колонки с <audio> внутри вообще никак не отображается

Answer 1

znachok.onclick = function(){audio.play()};
let audio = new Audio("sound.mp3");

<img id=znachok src="image.jpg" />

Правда, по приведенной Вами в качестве примера ссылке используется не элемент аудио, а window.speechsynthesis() для проговаривания текста.

Answer 2

В таком случае нужен speechSynthesis() а не аудио.

<style>
body{column-count: 3}
img{cursor: pointer}
</style>

<body></body>
<script>
let data = 
   ["filename1.mp3", "filename2.mp3, filename3.mp3, ... , filenameN.mp3], // имена аудиофайлов
   ["первое предложение", "второе предложение", "третье предложение", ... , "энное предложение"] // предложения
]
let audio = new Audio();
for(i = 0; i < data.length; i ++){
let znachok = document.createElement("img");
znachok.src = "image.jpg";
let mydiv = document.createElement("div");
mydiv.id = data[0][i];
mydiv.name = data[1][i];
mydiv.appendChild(znachok);
mydiv.innerHTML += " " + mydiv.name;
document.body.appendChild(mydiv);
mydiv.onclick = function(){
  audio.src = mydiv.id;
  audio.play();
}    
</script>

В этом примере озвучиваются 12 слов, но Вы можете увеличить их количество, просто увеличив длину массива. Пока работает только с английскими словами.

БЛОГ НА HUSL

воспроизведение аудио на сайте по клику без ссылки

Ответы (2 шт):