ActionScript到JavaScript的转换，在Flash CC中的HTML画布文档中的鼠标悬停上播放声音

ActionScript to JavaScript conversion to play a sound on mouseover in an HTML canvas document in Flash CC

本文关键字：文档 鼠标 播放声音 悬停 布文档 HTML 转换 JavaScript Flash ActionScript 中的      更新时间：2023-09-26

我已经找了很长一段时间来做一些我确信很简单的事情，但我找不到答案。我已经找到了一些关于这方面的一般教程，但到目前为止，我还没能把它与我尝试过的任何东西结合起来。如果我错过了，我很抱歉，但我感谢任何人能提供的帮助。

我有一个简单的按钮，我不久前在flash中构建的，我正在将其转换为HTML画布文档，这样我就可以将其作为HTML内容放置在鼠标悬停上的动画和声音网站中。当我发布到HTML时，我已经按照我想要的方式制作了动画，但使用ActionScript3，当用户将鼠标悬停在按钮上时，我会播放一个声音。当用户在我的html内容中鼠标悬停时，我也想让它仍然播放声音，但我还没有成功地将ActionScript转换为JavaScript，我真的不知道JavaScript。

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

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

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

如果有人能帮我把ActionScript3代码转换成JavaScript，这样当我把.fla文件发布成HTML时它就能工作，我将不胜感激。提前感谢！

以防万一（尽管它已经发布8年了），在按钮后面添加以下html片段，并用ogg/wav文件替换other-file.ogg和other-file.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，则将id="btn-Id"添加到按钮标记中；如果您已经有id，则用按钮id替换btn-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;
  });
});

由于浏览器策略的原因，自动播放声音在默认情况下被阻止，因此只有当用户已经与页面进行了交互（点击了某些内容或滚动了页面）时，它才会播放声音，如果用户还没有进行交互，它会显示播放按钮。我做了一个jsfiddle，它几乎有完全相同的代码，唯一的区别是音频源，我没有使用备份音频文件，我添加了一个按钮。

相关文章：