Каким тегом можно воспользоваться, чтобы аудио воспроизводилось прямо на сайте по клику на значок воспроизведения? как здесь: https://dictionary.cambridge.org/dictionary/english-russian/dictionary
<a href>
воспроизводит в отдельном окне, <audio>
, использованный отдельно, просто вставляет плеер, <img>
колонки с <audio>
внутри вообще никак не отображается
2 ответа
znachok.onclick = function(){audio.play()};
let audio = new Audio("sound.mp3");
<img id=znachok src="image.jpg" />
Правда, по приведенной Вами в качестве примера ссылке используется не элемент аудио, а window.speechsynthesis() для проговаривания текста.
-
Странно, когда отправляю ответ со смартфона, js-код не подсвечивается, т. е., выглядит, как обычный текст, а html-код не отображается вообще и исчезают переносы строк, вернее превращаются в пробелы ...– Опан27 апр 2021 в 8:35
-
-
Спасибо огромное! Всё заработало! Но только для одного значка... А если у меня 20 и более значков на странице? Я думала, что хватит замены znachok на znachok2 с одной и той же картинкой, но нет( Подскажите, пожалуйста, как можно вставить дополнительные значки со звуком? 28 апр 2021 в 20:02
-
если Вы мне и про подсветку Вашего ответа, я ничего не делала. 28 апр 2021 в 20:03
-
В таком случае нужен 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 слов, но Вы можете увеличить их количество, просто увеличив длину массива. Пока работает только с английскими словами.
-
Нет, извините, не вариант( я упростила. Это не отдельные слова, а предложения, которые озвучили реальные люди, мне важно, чтобы звучали именно они. И они на немецком. Пожалуйста, если знаете ещё варианты, напишите 29 апр 2021 в 19:53
-
Тогда пришлось задействовать элемент аудио. Я переделал ответ, теперь в массиве нужно прописать реальные имена аудиофайлов и тексты соответствующих предложений. По нажатию на значки озвучиваются целые предложения. Или должны озвучиваться слова по отдельности?– Опан30 апр 2021 в 5:20