Question

我正在开发一个项目，当您将鼠标悬停在图像上并停止在鼠标移动时播放声音。我想让它每次重新开始，每页都必须有多个图像。我正在寻找使这段代码有效的最有效方法。以下是示例页面：http://inventivewebdesign.com/audio-img/sound.html

代码：

<body>
    <script>
        function PlaySound(soundobj) {
            var thissound=document.getElementById(soundobj);
            thissound.play();
        }

        function StopSound(soundobj) {
            var thissound=document.getElementById(soundobj);
            thissound.pause();
            thissound.currentTime = 0;
        }
   </script>


<a onmouseover="PlaySound('violin')" onmouseout="StopSound('violin')"><img src="violin.png"></a>

<a onmouseover="PlaySound('xy')" onmouseout="StopSound('xy')"><img src="xy.png" width="300px" height="300px"></a>

<a onmouseover="PlaySound('piccolo')" onmouseout="StopSound('piccolo')"><img src="piccolo.png"></a>

    <audio id='piccolo' src='piccolo.wav'/>
    <audio id='violin' src='violin.mp3'/>
    <audio id='xy' src='xy.mp3'/>

</body>

这一切都有效。我唯一的问题是如何使代码更有效。我看到我应该可以做这样的事情：

<audio>
    <source id='piccolo' src='piccolo.wav'>
    <source id='violin' src='violin.mp3'>
    <source id='xy' src='xy.mp3'>
</audio>

但它不起作用。第一组代码是最好的方法吗？

Answer 1

好问题@MattM。我只需添加一个函数来创建音频悬停的新实例，这样可以更轻松地实现更多声音，而无需重复代码。

function newHover(e){
     var audio = new Audio(); // creates audio element
     audio.src = e.audio; // the audios location
     var image = new Image(); //creates the image element
     image.src = e.image; // the images location
     image.className = e.title; // applies the name of the instrument to both elements
     audio.className = e.title;
     image.addEventListener("mouseover", PlaySound); // listens for mouse movement
     image.addEventListener("mouseout", StopSound);
     document.body.appendChild(audio); // appends the audio and image to the body of the document
     document.body.appendChild(image);
}

这样，下面的代码块是不必要的：

<a onmouseover="PlaySound('violin')" onmouseout="StopSound('violin')">
     <img src="violin.png">
</a>

<a onmouseover="PlaySound('xy')" onmouseout="StopSound('xy')">
     <img src="xy.png" width="300px" height="300px">
</a>

<a onmouseover="PlaySound('piccolo')" onmouseout="StopSound('piccolo')">
     <img src="piccolo.png">
</a>

<audio id='piccolo' src='piccolo.wav'/>
<audio id='violin' src='violin.mp3'/>
<audio id='xy' src='xy.mp3'/>

在您的代码中实现此功能，此解决方案中不需要任何HTML。

（注意：在PlaySound和PauseSound函数中，getElementById已更改为querySelector）

＆＃13;

function PlaySound(e) {
    var thissound = document.querySelector("audio." + e.target.className);
    thissound.play();
}
function StopSound(e) {
    var thissound = document.querySelector("audio." + e.target.className);
    thissound.pause();
    thissound.currentTime = 0;
}
function newHover(e){
    var audio = new Audio();
    audio.src = e.audio;
    var image = new Image();
    image.src = e.image;
    image.className = e.title;
    audio.className = e.title;
    image.addEventListener("mouseover", PlaySound);
    image.addEventListener("mouseout", StopSound);
    document.body.appendChild(audio);
    document.body.appendChild(image);
}


window.onload = function(){
    newHover({
        audio: "http://inventivewebdesign.com/audio-img/piccolo.wav", // Path to the audio file (the src property of audio tag)
        image: "http://inventivewebdesign.com/audio-img/piccolo.png", // Path to the image file (the src property of the image tag)
        title: "piccolo" // The name of the instrument (applied as a className to both the image and the audio elements)
    });
    newHover({
        audio: "http://inventivewebdesign.com/audio-img/xy.mp3",
        image: "http://inventivewebdesign.com/audio-img/xy.png",
        title: "xy"
    });
    newHover({
        audio: "http://inventivewebdesign.com/audio-img/violin.mp3",
        image: "http://inventivewebdesign.com/audio-img/violin.png",
        title: "violin"
    });
}

＆＃13;

a{
  position: absolute;
}
img{
  width: 100px;
}

＆＃13;

<body>
<a>Hover over the images!</a>
</body>

＆＃13;

总之，您的解决方案可以有效地运行，但是它可以让您更轻松地为您创建音频悬停功能。

我看了一下Inventionwebdesign.com，非常好的网站！

编辑＆gt;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;

注意 - 我在Firefox和Chrome中测试了该脚本。它应该工作正常。

有关如何使用该功能的说明：

插入图像。调用newHover函数就像这样：

    newHover({
       audio: /*audio src here eg. music.wav*/,
       image: /*image src here eg. picture.png*/,
       title: /*title here eg. violin / xylophone / piccolo*/
    });

图像将插入到文档中。然后，您可以应用CSS样式或执行您想要的任何其他内容。

鼠标悬停时声音，鼠标停止时停止

1 个答案: