如何在懸停的不同圖像上播放不同的聲音jQuery

-1

我爲我的第一個網站製作了一個Soundboard類型的東西，但我在將不同的聲音應用於其不同的相應圖像時遇到了麻煩。這是我迄今爲止所做的。如果我使用了錯誤的禮節，這是我第一次發帖抱歉。我想讓圖像成爲刺激播放聲音的懸停區域。目前在'傳感器'之後寫作'傳感器'和'電阻器'。這似乎是一個元素。如何在懸停的不同圖像上播放不同的聲音jQuery

是觸發聲音的區域。

I know you specified a jQuery answer, but this solution works efficiently in JavaScript: 

<div class="box"> 
     <img class= "Transducer" src="img/SBTransducer.svg" alt="Transducer diagram symbol Soundboard>"> 
     <p class="SB11L">Transducer</p> 
    <div class="trigger">Transducer 
    <audio id="sound" preload="auto"> 
    <source src="Sounds/TRANSDUCER.mp3" /> 
    </audio> 
    </div> 
    </div> 

<div class="box"> 
     <img class= "ResistorZig" src="img/SBResistorZig.svg" alt="Resistor diagram symbol  Soundboard>"> 
     <!--<p class="SB8L">Resistor</p>--> 
     <div class="trigger">RESISTOR 
    <audio id="sound" preload="auto"> 
    <source src="Sounds/RESISTOR.mp3" /> 
    </audio> 
    </div>  
    </div> 


<script>$('.trigger').hover(
function() { 
    sound = $(this).children()[0]; 
    sound.play(); 
}, function() { 
    sound.pause(); 
    sound.currentTime = 0; 
    } 
); 
</script>

來源

2014-12-08 Callum N-D

你的兩個最大的問題是：你應該附上懸停事件偵聽器.box或img元素爲懸停提供了一個體面的區域，並且您重複了音頻ID sound。最好給他們一類sound並用.children('.sound')來選擇它們。

一旦你解決了這些問題，它應該可以正常工作。

HTML：

<div class="box"> 
    <img class= "Transducer" src="img/SBTransducer.svg"> 

    <audio id="transducerSound" class="mySound" preload="auto"> 
     <source src="Sounds/TRANSDUCER.mp3" /> 
    </audio> 
</div> 

<div class="box"> 
    <img class= "ResistorZig" src="img/SBResistorZig.svg"> 

    <audio id="resistorZigSound" class="mySound" preload="auto"> 
     <source src="Sounds/RESISTOR.mp3" /> 
    </audio>  
</div>

JS：

var sound; 

$('.box').hover(
    function() { 
     sound = $(this).children('mySound')[0]; 
     sound.play(); 

    }, function() { 
     sound.pause(); 
     sound.currentTime = 0; 
    } 
);

來源

2014-12-08 02:37:57 Calummm

做到這一點，但我沒有運氣。我目前不瞭解這些術語的含義。我編輯了我原來的帖子來顯示我的問題，任何幫助將不勝感激 – 2014-12-08 04:34:33

非常感謝。有效！ – 2014-12-08 12:27:22

我知道你指定一個jQuery的答案，但這種方法有效地工作在JavaScript：

<div class="box"> 
     <img class= "Soundboard" src="img/SBDiode.svg" alt="Diode diagram symbol Soundboard>"  onmouseover="play('/Sounds/DIODE.mp3')"> 
     <p class="SB8L">Diode</p> 
<div class="trigger"> 
</div> 
</div> 

<div class="box"> 
     <img class= "Soundboard" src="img/SBTransducer.svg" alt="Transistor diagram symbol Soundboard>" onmouseover="play('/Sounds/TRANSDUCER.mp3')"> 
     <p class="SB11L">Transducer</p> 
<div class="trigger"> 
</div> 
</div> 

<script> 
function play(music){ 
var music = new Audio(music); 
music.play(); 
} 
</script>

來源

2014-12-08 02:31:07 ajc2000

感謝您的建議。我設法從其他答案 – 2014-12-08 16:37:42

如何在懸停的不同圖像上播放不同的聲音jQuery

回答

相關問題