CODEWITHSUNDEEP
javascripthtmlactionscript-3audioflash-cc
Joel Glastetter
Joel Glastetter

Reputation: 1

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

I've been looking for quite some time to do something that I'm sure is simple, but I can't find the answer. I have found a few general tutorials on this, but have not been able to get it to work with anything I've tried so far. I'm sorry if I missed it, but I appreciate any help anyone can provide.

I have a simple button that I built in flash a while ago that I am converting to an HTML canvas document so I can place it as HTML content in a website with animation and sound on mouseover. I've got the animation working the way I want it when I publish to HTML, but using ActionScript 3, I had a sound that played when the user moused over the button. I want to have it still play a sound when the user mouses over it in my html content too, but I have not had success yet with converting my ActionScript to JavaScript and I don't really know JavaScript.

I would also like to have multiple fallback formats (ogg, wav) of the audio file linked in the code for any browsers that don't work with mp3 files. I can convert the audio file no problem but don't know how to code this in JavaScript….

Here is the ActionScript code which works fine in my original document when I export as a .swf file.

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

If someone could help me convert this ActionScript 3 code to JavaScript so that it will work when I publish my .fla file to HTML, I would greatly appreciate it. Thanks in advance!

Upvotes: 0

Views: 729

Answers (1)

Invalid Name
Invalid Name

Reputation: 63

Just in case (even though it has been 8 years since posted), add the following html snippet after the button and replace other-file.ogg and other-file.wav with your ogg/wav files

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

and add the following javascript to a script tag and add id="btn-Id" to your button tag if you do not already have an id and if you do already have an id replace btn-Id with the button 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;
  });
});

Due to browser policies, auto playing sound is blocked by default, so it only plays the sound if the user has already interacted with the page (clicked on something or scrolled the page) and shows a play button if they have not. I made a jsfiddle that has almost exactly the same code, the only difference is the audio source, I am not using backup audio files, and I added a button.

Upvotes: 0

Related Questions