Попытка воспроизвести звук HTML5 при наведении мыши - PullRequest
Новая
       13

Попытка воспроизвести звук HTML5 при наведении мыши

1 голос
/ 31 октября 2011

Я не уверен, почему этот скрипт не работает так, как мне кажется, и когда я его запускаю, ошибок не возникает Я также использую qTip 2, если это имеет какое-либо значение для взаимодействия этого сценария.

Вот мои сценарии.

JS 

    <script type="text/javascript">
var $j = jQuery.noConflict();

var growlSound = $j("#growlSound")[0];
$j("#growl")
    .mouseenter(function() {
            growlSound.play();
    });

var laughSound = $j("#laughSound")[0];
$j("#laugh")
    .mouseenter(function() {
            laughSound.play();
    });

</script>

HTML 

<audio id="growlSound" preload="auto">
                            <source src="/messages4u/2011/images/october/growl.ogg">
                            <source src="/messages4u/2011/images/october/growl.mp3">
                            Your browser does not support HTML5 Audio. Please Upgrade Your Browser.
                    </audio>
                            <audio id="laughSound" preload="auto">
                            <source src="/messages4u/2011/images/october/laugh.ogg">
                            <source src="/messages4u/2011/images/october/laugh.mp3">
                            Your browser does not support HTML5 Audio. Please Upgrade Your Browser.
                    </audio>
    <p><img src="/messages4u/2011/images/october/halloween4.jpg" width="600" border="0" usemap="#Map" class="center" style="width: 600px;" />
      <map name="Map" id="Map">
        <area class="growl" id="growl" style="cursor:default;" shape="rect" coords="117,118,225,223" href="#" />
        <area class="laugh" id="laugh" style="cursor:default;" shape="rect" coords="255,244,308,292" href="#" />
      </map>
</p>

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

ОБНОВЛЕНИЕ - Похоже, событие mouseenter не работает.

1 Ответ

3 голосов
/ 31 октября 2011

В игре могут быть и другие факторы.Я создал более простой пример здесь;кажется, что работает (в Chrome):

http://jsfiddle.net/5PnCt/2/

Возможно, что:

  • Ваши аудиофайлы неправильно связаны
  • Вы каким-то образом не можете вызвать событие mouseenter
  • Вы неправильно связываете событие

Чтобы проверить второй случай, добавьте что-то вроде: 

        console.log('playing');

... одному из ваших обработчиков мышиного ввода.Если событие инициировано, вы должны увидеть сообщение журнала.

В третьем случае убедитесь, что вы поместили свои сценарии ПОСЛЕ HTML-кода, на который они влияют, или используйте следующую оболочку, чтобы убедиться, что они не• выполнять до тех пор, пока не загрузится HTML: 

var $j = jQuery.noConflict();
$j(document).ready(function(){
    ...code goes here...
});

Вы не можете выбирать и привязывать события к элементу, если он не существует на странице, поэтому важен порядок вашего кода.Использование document.ready - один из способов обойти эту проблему;он говорит jQuery подождать, пока страница полностью загрузится, прежде чем пытаться выполнить скрипт.

...