Воспроизвести звук, когда мышь на колоколе SVG ⇐ Jquery

[Anonymous]

Из этой ссылки у меня есть хороший маленький анимированный Svg Bell. Переместите мышь на SVG, и колокол качается вперед и назад. < /P>
Все, чего не хватает, это звук! Отсюда пробовал различные советы, но я не могу получить звук, чтобы играть, когда мышь переживает SVG.
Ring the bells
Hover over me!


Your browser does not support the audio tag.

< /code>
Но я пытаюсь заставить ее играть, когда мышь переживает SVG, у которого уже есть настройка падения в настройках SVG. Может быть, это проблема? Есть советы, пожалуйста? < /P>
Вот полный HTML, который я пробовал до сих пор: < /p>


var audio = $("#audio")[0];
audio.play();
var audio = $("#audio")[0];
$("h1").mouseenter(function() {
audio.play();
});< /code>
#bell {
transform-origin: 0 -45px;
}

svg:hover #bell,
svg:hover #bell-clapper {
animation-duration: 0.5s;
animation-delay: -0.25s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-name: ring;
}

@keyframes ring {
from {
transform: rotate(-20deg);
}

to {
transform: rotate(20deg);
}
}< /code>


Ring the bells
Hover over me!


Your browser does not support the audio tag.













< /code>
< /div>
< /div>
< /p>
Редактировать: я пытался воспроизводить звук, используя статический SVG и советы от Kostas minaidis. Ссылкаерр: $ не определяется
at smiley2.html: 31: 1 (анонимный) @ smiley2.html: 31 < /p>
< /blockquote>
строка 31 в HTML ниже: < /p>

$обрать. /> < /blockquote>
Вот целая html smiley2.html: < /p>



Smiley



Start
Smiley










let hasInitialized = false; // Used to track audio initialization

$("button").click(function(){

if ( hasInitialized ){ // Already initialized? Stop here.
return;
}
hasInitialized = true;

// Load Audio:
const audio = new Audio("sounds/bell2.mp3");
console.log(audio.readyState); // => HTMLMediaElement.HAVE_NOTHING (0)

// Check if audio is ready for playback...
audio.addEventListener("canplaythrough", (event) => {
// Start listening:
$("svg").mouseenter(function() {
console.log(audio.readyState); // => HTMLMediaElement.HAVE_ENOUGH_DATA (4)
audio.play();
});
});

})





Подробнее здесь: https://stackoverflow.com/questions/797 ... n-svg-bell