Как играть звук на клике или ролловере

Используйте динамический HTML для воспроизведения звуков

Одна из особенностей компьютерных приложений – обратная связь, когда вы что-то делаете. Самым распространенным типом обратной связи является звук. Компьютер щелкает, когда вы выбираете вещи, издает звуковые сигналы при возникновении ошибок и издает другие звуки, чтобы предупредить вас о ситуациях. Но у веб-страниц нет такого типа обратной связи. Это заставляет их казаться скучными или невосприимчивыми.

К счастью, это легко изменить. Используя динамические атрибуты и звуки HTML, вы можете создать веб-страницу, которая будет больше похожа на приложение.

Добавить звук, когда клиент что-то нажимает

Этот сценарий добавляет звуковые эффекты, когда клиент нажимает на что-либо, используя атрибут, и когда клиент переворачивает что-либо, используя атрибут. Обязательно протестируйте их в разных браузерах, поскольку не все веб-браузеры обрабатывают при наведении курсора мыши и на атрибуты щелчка на элементах, кроме ссылок.

Поместите следующий скрипт в ГОЛОВКУ вашего HTML-документа:

 
function playSound (soundfile) {
document.getElementById ("dummy"). innerHTML = " + soundfile +" \ "hidden = \" true \ "autostart = \" true \ "
loop = \" false \ "/>";
}

Поместите звук в пустой промежуток

JavaScript запускает элемент EMBED внутри пустого элемента SPAN при запуске сценария. Итак, вам нужно добавить следующий тег SPAN где-то внутри ТЕЛА вашей HTML-страницы, желательно в верхней части документа:

 

Назовите сценарий с атрибутом

Последнее, что вам нужно добавить, это элемент, который вы хотите генерировать звук при нажатии или при наведении курсора. Вызовите сценарий с одним из этих атрибутов. Замените UrlToSoundFile полным URL-адресом звукового файла, который вы хотите воспроизвести:

  onclick = "playSound ('UrlToSoundFile');" > Нажмите здесь, чтобы услышать звук  

onmouseover = "playSound ('UrlToSoundFile');" > Наведите курсор на этот текст, чтобы услышать звук


Вот весь HTML-документ, воспроизводящий звук блюджей. Звуковой файл хранится в том же каталоге, что и HTML-страница:

 



Пример того, как воспроизводить звук при нажатии или при использовании MouseOver

playSound (звуковой файл) {
document.getElementById ("dummy"). innerHTML =
"";
}




onclick =" playSound ('zbluejay.wav'); "> Нажмите здесь, чтобы услышать пение птицы


onmouseover =" playSound ('zbluejay.wav'); "> Или вы можете навести указатель мыши на этот абзац, чтобы услышать тот же звук птицы.




Оцените статью
Solutics.ru
Добавить комментарий