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

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

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

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

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

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


function playSound (soundfile) {
document.getElementById ("dummy"). innerHTML = "+звуковой файл + "\" hidden = \ "true \" autostart = \ "true \"
loop = \ "false \" /> ";
}


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

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



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

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

Нажмите здесь, чтобы услышать звук
Наведите курсор мыши на этот текст, чтобы услышать звук



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





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

function playSound (soundfile) {
  document.getElementById ( "фиктивный"). innerHTML =
    "";
}




Нажмите здесь, чтобы услышать пение птицы


Или вы можете навести указатель мыши на этот абзац, чтобы услышать тот же звук птицы.





Ссылка на основную публикацию