在圖像地圖上的鼠標懸停上使用音頻

-2

我想通過創建一個圖像地圖來幫助朋友與他的Uni項目，該圖像播放當您將鼠標懸停在圖像的不同部分時創建的音頻剪輯。我只是不知道我看起來有什麼錯誤，非常感謝任何幫助！在圖像地圖上的鼠標懸停上使用音頻

HTML：

<head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" href="DLL MUSIC SIM.css"> 
     <script type="text/javascript" src="DLL MUSIC SIM.js"></script> 
     <title>Daddy Long Legs Music Simulator</title> 
    </head> 

    <body> 
     <img src="https://photos-4.dropbox.com/t/2/AAD7kArwYwyj90InSvhwMX09saAeNWEh4czxGRe2JjinjQ/12/150613124/png/32x32/1/_/1/2/First%20Draft.png/EJKfmnMYRCACKAI/xur8HIDxW2Qob1IEtNOndWn1TSPxcVdIxuzxDGr1BxY?size=2048x1536&size_mode=3" alt="" usemap="#DrumMap" /> 
     <img id="draft" width="1652" height="971" alt=""> 
     <map name="map"> 
      <area shape="poly" coords="685,480,695,678,993,684,983,472" nohref="nohref" onmouseover="changeClip('drum1');"/> 

     </map> 

     <audio id="drum1"><source src="https://www.dropbox.com/s/i85f9q7qruar91m/Track%201%20Drums.wav?dl=0" type="audio/wav"></source></audio> 

    </body> 

</html>

CSS：

body{ 
    background-color: black; 
} 

area { 
    display: none; 
} 

#audio { 
    display: none; 
}

JS：

function playClip(clip) { 
    document.getElementById(note).play(); 
} 

function pauseAudio() { 
    audio.pause() onmouseout; 
}

我一直在尋找這樣了一段時間，雖然沒有任何進一步的前進，感謝提前！

來源

2017-05-14 disco420

爲了幫助你，我建議你看看這個最小工作示例：

var go = document.getElementById('play'), 
 
    audio = null; 
 

 
go.addEventListener('mouseenter', play, false); 
 
go.addEventListener('mouseout', stop, false); 
 

 
function play() { 
 
    audio = new Audio('https://www.gnu.org/music/FreeSWSong.ogg'); 
 
    audio.play(); 
 
} 
 

 
function stop() { 
 
    if (!audio.paused) { 
 
    audio.pause(); 
 
    } 
 
    audio = null; 
 
}

<img src="https://i.stack.imgur.com/Iy4Wr.png" usemap="#map"> 
 

 
<map name="map"> 
 
    <area id="play" shape="circle" coords="150,149,49" title="Play"> 
 
</map>

正如你可以看到，這是不是很複雜...你只需要正確創建map（您可以使用GIMP）並定義正確的事件偵聽器/處理程序。

來源

2017-05-14 16:28:41 Badacadabra

非常好，謝謝！我可以在一個在線網站測試儀上工作，但是必須包含不同的音頻格式，因爲它不適用於我的Chrome。我假設我將不得不爲每個我想播放的聲音創建不同的變量和函數？那是對的嗎？ – disco420

哦，對不起，我在Firefox和Ogg支持。事實上，您可以在JS中使用多個變量來處理多種格式，但在HTML中使用''和'

在圖像地圖上的鼠標懸停上使用音頻

回答

相關問題