0

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!

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Joel Glastetter
  • 1
  • You will get down-voted for this. (justified) Show us what you have tried / what you investigated. – Fygo Oct 07 '14 at 20:31
  • I'm not sure why I would get down-voted for knowing how to do something in one language and asking for help in doing it in another or why you don't believe that I have tried, but here are some links to the pages I have looked at that have similar solutions. http://www.javascriptkit.com/script/script2/soundlink.shtml#current http://html5hub.com/flash-cc-to-html5/ http://stackoverflow.com/questions/7299248/play-sound-on-mouseover-with-javascript http://community.createjs.com/discussions/soundjs/1588-adding-sound-to-createjs – Joel Glastetter Oct 07 '14 at 22:38
  • Sorry, I messed up the last comment. Here are some links to the pages I have looked at for help. http://www.javascriptkit.com/script/script2/soundlink.shtml#current http://html5hub.com/flash-cc-to-html5/ http://stackoverflow.com/questions/7299248/play-sound-on-mouseover-with-javascript http://community.createjs.com/discussions/soundjs/1588-adding-sound-to-createjs These are just a few… I have not posted any of the code I have tried, because I'm sure I butchered it. As stated, I don't understand javascript. I'm not trying to bamboozle anyone. Just an honest guy who needs some help. – Joel Glastetter Oct 07 '14 at 22:51
  • You will get down-voted because this site is not a code-conversion site and believe me, nobody will do it for you. Have you checked the API for *audio* html5 tag? – Fygo Oct 07 '14 at 23:11
  • I'm not sure where to find that. Would it be ok for you to give me a link so that I can take a look at what you are referring to? – Joel Glastetter Oct 07 '14 at 23:58
  • Just google it. There is a crapload of html5 audio tutorials. You also posted a createjs link your comment so why don't you check soundjs from createjs? http://createjs.com/Docs/SoundJS/modules/SoundJS.html – Fygo Oct 08 '14 at 17:26
  • possible duplicate of [faster way for calling audio element to play in html5](http://stackoverflow.com/questions/14032412/faster-way-for-calling-audio-element-to-play-in-html5) – Paul Sweatte Jun 30 '15 at 23:58

1 Answers1

0

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.

Invalid Name
  • 38
  • 3
  • 7