Verwenden von Audio bei Mouseover auf Imagemap

-2

Ich versuche einem Freund mit seinem Uni-Projekt zu helfen, indem ich eine Imagemap erzeuge, die Audioclips wiedergibt, die er erstellt hat, wenn man über verschiedene Teile des Bildes fährt. Ich weiß einfach nicht, was ich falsch liege, jede Hilfe wird sehr geschätzt!Verwenden von Audio bei Mouseover auf Imagemap

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; 
}

Ich habe dies gesucht jetzt eine Weile aber nicht weiter nach vorn, dank voraus!

Quelle

2017-05-14 disco420

Ihnen dabei zu helfen, schlage ich vor, Sie einen Blick auf diese minimale Arbeits Beispiel zu nehmen:

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>

Wie Sie sehen können, ist dies nicht sehr kompliziert ist ... Sie haben soeben haben um eine map richtig zu erstellen (Sie können GIMP dafür verwenden) und die richtigen Event Listeners/Handler definieren.

Quelle

2017-05-14 16:28:41 Badacadabra

Ausgezeichnet, danke! Ich kann dies auf einem Online-Site-Tester arbeiten, muss aber verschiedene Audio-Formate aufnehmen, da es für mich nicht auf Chrome funktioniert. Ich nehme an, dass ich für jeden Sound, den ich spielen möchte, verschiedene Variablen und Funktionen erstellen muss? Ist das korrekt? – disco420

Oh Entschuldigung, ich bin auf Firefox und Ogg wird unterstützt. In der Tat könnten Sie mehrere Variablen in Ihrem JS verwenden, um mehrere Formate zu handhaben, aber es wäre bequemer mit '' und '

Verwenden von Audio bei Mouseover auf Imagemap

Antwort

Verwandte Themen