0

我一直在寻找相当长的时间来做一些我确信很简单的事情，但我找不到答案。我已经找到了一些关于这方面的一般教程，但是到目前为止我还没有能够让它与我尝试过的任何东西一起工作。如果我错过了，我很抱歉，但我感谢任何人可以提供的任何帮助。

我有一个简单的按钮，我不久前在 Flash 中构建了它，我正在将其转换为 HTML 画布文档，因此我可以将其作为 HTML 内容放置在网站中，鼠标悬停时带有动画和声音。当我发布到 HTML 时，动画按我想要的方式工作，但是使用 ActionScript 3，当用户将鼠标悬停在按钮上时，我会播放声音。当用户在我的 html 内容中将鼠标悬停在它上面时，我也希望它仍然播放声音，但是我还没有成功将我的 ActionScript 转换为 JavaScript，而且我真的不知道 JavaScript。

我还希望在代码中链接的音频文件有多种后备格式（ogg、wav），适用于任何不支持 mp3 文件的浏览器。我可以毫无问题地转换音频文件，但不知道如何在 JavaScript 中编写代码……。

这是我导出为 .swf 文件时在原始文档中运行良好的 ActionScript 代码。

stop();
import flash.media.Sound;
import flash.net.URLRequest;
import flash.events.Event;

sprayGunbtn.addEventListener(MouseEvent.MOUSE_OVER, playSound);

var myExternalSound:Sound = new Sound();
var req:URLRequest = new URLRequest("ShortSpray.mp3");

myExternalSound.load(req);

function playSound(event:Event){
    myExternalSound.play();
}

如果有人可以帮助我将此 ActionScript 3 代码转换为 JavaScript，以便在我将 .fla 文件发布为 HTML 时它可以工作，我将不胜感激。提前致谢！

4

1 回答 1

0

在按钮后添加以下 html 片段并将 other-file.ogg 和 other-file.wav 替换为您的 ogg/wav 文件

<audio id="SomeCustomId">
  <source src="ShortSpray.mp3" type="audio/mpeg">
  <source src="other-file.ogg" type="audio/ogg">
  <source src="other-file.wav" type="audio/wav">
  Your browser does not support the audio tag.
</audio>
<button id="DidNotPlayAutomatically" hidden>Play</button>

并将以下 javascript 添加到脚本标记并添加id="btn-Id"到您的按钮标记，如果您还没有 id 并且如果您已经有 id 替换 btn-Id 为按钮 id。

var fgbnmlj = document.getElementById("btn-Id");
var audio = document.getElementById("SomeCustomId");
window.onload = fgbnmlj.addEventListener("mouseover", function() {
  audio.play().then(function() {
    console.log("No problems");
  }).catch(function(error) {
    var playButton = document.getElementById("DidNotPlayAutomatically");
    playButton.addEventListener('click', function() {
      audio.play();
    });
    playButton.hidden = false;
  });
});

请注意，该代码可能无法在 Internet Explorer 中运行，并且仅在 chrome 中进行了测试。如果用户已经与文档进行了交互（点击某些东西），它只会播放声音，如果还没有，它会显示一个播放按钮。我做了一个几乎完全相同代码的jsfiddle，唯一的区别是音频源，我没有使用备份音频文件，我添加了一个按钮。

于 2021-06-16T00:24:34.230 回答