Звук при наведении курсора с использованием HTML5 Audio - PullRequest
5 голосов
/ 10 марта 2011

Можно ли использовать HTML5 для создания звука, когда пользователь наводит курсор на одну из кнопок моего списка?Я бы хотел сыграть очень короткий щелчок / звуковой сигнал один раз, когда пользователь наводит курсор на кнопку навигации.Я понимаю, что это не будет совместимо с каждым браузером или устройством, и это нормально, пока оно изящно ухудшается.Было бы лучше по какой-то причине использовать Flash для этого?

Редактировать
Кроме того, если это возможно, мне будет интересен пример кода, включая JavaScript(если необходим JavaScript).Я в порядке с HTML, но не слишком удобен с Javascript.

Ответы [ 2 ]

7 голосов
/ 10 марта 2011

Я не делал ничего подобного, но это должно быть возможно. Э.Г.

<audio id="myaudio" src="myaudio.mp3"></audio>

<button onmouseover="document.getElementById('myaudio').play()">Hover me</button>

Я не знаком с Flash, поэтому не уверен, что вы можете использовать JavaScript для воспроизведения Flash-файла.

0 голосов
/ 10 марта 2011

Это старый ответ, в настоящее время вы можете просто использовать HTML5.


Я бы не рекомендовал звук при наведении.Пользователи могут очень легко раздражаться (я бы).

В любом случае, вот как, и ему не нужен HTML5 :

1) Имейте простой javascript для воспроизведения звука

<script>
    function EvalSound(soundobj) {
        var thissound=document.getElementById(soundobj);
        try {
            thissound.Play(); //Quicktime, Windows Media Player, etc.
        }
        catch (e) {
            thissound.DoPlay(); //Real Player
        }
    }
</script>

2) Сделайте невидимую вставку со звуком

<embed src="mysound.wav" 
       autostart=false 
       width=0 
       height=0 
       id="mySound" 
       enablejavascript="true" />

3) Включите воспроизведение при наведении

<ul id="myList">
    <li onHover="EvalSound('mySound')">Foo</li>
    <li onHover="EvalSound('mySound')">Bar</li>
</ul>

В качестве альтернативы, прикрепите событие с помощью jQuery:

<script>
    $(document).ready(function() {
        $('#myList').hover(EvalSound('mySound'));
    });
</script>

Отредактировано , потому что реальный игрок использует DoPlay() вместо Play().

...