We Keep Coding

How to initialise SoundJS for IOS 9

We've been using the CreateJS suite for a while now, but have just realised that our audio is not working on IOS9. Unfortunately we only have one IOS9 test device, running IOS9.2.4, but are getting mixed results with audio playback.
The rough process I'm using is;
Preload all assets (scripts/images/audio) via PreloadJS
Construct an initial splash screen in EaselJS, including a start button
Continue with the main content
It would be advantageous to be able to preload all audio before presenting that splash screen. The splash screen was added initially to allow audio to play on mobile Safari, with an empty sound played on click. This does of course work for IOS7/8, but not for 9.
I've created this test case on codepen as an attempt to track down the issue and try some options.
Codepen sample
HTML
<p id="status">Hello World</p>
<canvas id="canvas" width="200" height="200"></canvas>
JS
var canvas, stage, rect;
function init() {
canvas = document.getElementById('canvas');
canvas.style.background = "rgb(10,10,30)";
stage = new createjs.Stage("canvas");
createjs.Touch.enable(stage);
rect = new createjs.Shape();
rect.graphics.f("#f00").dr(50,75,100, 50);
rect.on("mousedown", handleStart, null, true);
rect.on("touchend", handleStart, null, true);
//rect.on("click", handleStart, null, true);
stage.addChild(rect);
stage.update();
$('#status').text("Touch to Start");
createjs.Sound.initializeDefaultPlugins();
//createjs.Sound.alternateExtensions = ["ogg"];
createjs.Sound.registerSound("https://www.freesound.org/data/previews/66/66136_606715-lq.mp3", "ding1");
}
function handleStart(event) {
createjs.WebAudioPlugin.playEmptySound();
$('#status').text("Touch to Play");
rect.graphics._fill.style = '#0f0';
rect.removeAllEventListeners();
rect.on('click', handlePlay);
stage.update();
}
function handlePlay(){
createjs.Sound.play("ding1");
$('#status').text("Playing");
}
init();
Apologies for the lack of ogg version, was struggling to get test files to load x-domain.
With this, audio partially works for us on IOS9. If we leave clicking the red rectangle (figure start button) and leave it ~20 seconds, then click the green button no audio plays. If we click it immediately, audio plays fine.
I have been reviewing this bug/thread and attempting to follow Grant's suggestions. I gather SoundJS v0.6.2 now automatically attempts to play the empty sound appropriate when plugins are initialized, however moving the initializeDefaultPlugins and registerSounds calls into the handleStart function appears to make no difference. If I'm understanding the issue correctly, calling the WebAudioPlugin.playEmptySound method should be sufficient?
Have also been looking at the event binding, trying mousedown/touchend instead of click, but the result is the same with the 20 second wait. Event also appears to fire twice, although I could probably dig deeper into that if I could get it to work correctly.
I'm aware of the Mobile Safe Approach article aimed at this issue, but the need for a namespace at this level would mean a substantial rewrite of our existing content. Could someone perhaps advise if it is completely necessary to take this approach? I'm under the impression it should be feasible by correctly playing some empty audio within that initial handler.
Can't actually get the main project to this point, but if I can get a working example perhaps I'll be a step closer.
Any thoughts would be appreciated!

The Mobile-safe tutorial is not really relevant anymore since the updates in 0.6.2. It will likely be updated or removed in the near future.
You should never need to initializeDefaultPlugins(), unless you want to act on the result (ie, check the activePlugin before doing something). This method fires automatically the first time you try and register a sound.
The playEmptySound is also no longer necessary. SoundJS will listen for the first document mousedown/click, and automatically do this in the background.
touch events are not directly propagated from the EaselJS stage, but are instead turned into mouse events (touchstart=mousedown, touchmove=mousemove, touchend=pressup/click)
Based on this, you should be able to play sound once anywhere in the document has been clicked, regardless of whether you listen for it or not.
That is not to say that there isn't a bug, just that the steps you are taking shouldn't be necessary. I did some testing, and it appears to work in iOS9. Here is a simplified fiddle.
https://jsfiddle.net/lannymcnie/b4k19fwc/ (link updated Dec 3, 2018)

Stopping audio on fragment in Reveal.js

I happily use Reveal.js for presentation purposes, but now I want to create MOOCS using the fine script. I want to put an audio clip with each fragment, that starts playing when the fragment is shown. So far that works fine using the eventListener method to start and pause audio in my slideshow. However, given the nature of this method, the audio or video will continue when the next fragment is shown, as it is dependent on the status of 'fragmentshown' or 'fragmenthidden'. (see below)
Reveal.addEventListener( 'fragmentshown', function( event ) {
var audio = event.fragment.querySelector( 'audio' );
if( audio ) {
audio.play();
}});
Reveal.addEventListener( 'fragmenthidden', function( event ) {
var audio = event.fragment.querySelector( 'audio' );
if( audio ) {
audio.pause();
}});
Is there an easy way to extend this using the 'current-fragment' class that's added to the fragment that is current (duh), to pause (or better yet: stop) the audio when the class is passed on to the next fragment? I'm sure there is, but I'm a novice and would really appreciate a heads up here. It would be great for moocing purposes if this would be part of the code. I get lots of requests for it from teaching colleagues at our university.

To generate a MOOC you can use the audio-slideshow plugin that does the job for you. The plugin allows you to specify an audio file for each slide and fragment. Alternatively, it automatically checks if there is an audio file for the slide and fragment based on the reveal.js indices, e.g. for the second horizontal and first vertical slide ist checks whether there is a file audio/1.0.ogg.
You can also record the audio while presenting using the slideshow-recorder plugin or use text-to-speech.
You can find a demo here and the plugin here
Asvin

MouseOver sound effect, a Better way than this

I need a sound on a mouse over event, I have this way but its problem comes from a delay between the mouse over and the sound playing, which is due (I supposed) the embed sound deal on the code. I would like to know if there is a better way using js/jquery). But not the new html5 audio tag which I don't want to implement in this particular case.
An ajax call loads the file, then I attached to the mouseOver a function named playSound()
function playSound()
{
$setSound = document.getElementById("soundWrapper").innerHTML="<embed id='sound' src='href' type=audio/mpeg hidden=false autostart=true volume=12>";
}
Then to the mouseOut event a function named stopSound()
function stopSound()
{
$stopSound = document.getElementById("soundWrapper").innerHTML="";
}
Nothing fancy but it does work. The problem as a said is the delay to playing the sound. Is there a way to play/stop the already embedded sound, not just embed a new one every time, or something alike?.
Thanks for your time and help.
Greetings.

If you have your AJAX load an audio tag (http://www.w3schools.com/tags/tag_audio.asp) into the desired place, you can play it using the .play() method in JS. Then it becomes really easy
$(YOURMOUSEOVERELEMENT).on('mouseover', function(){$('#sound').play()});
Then if you want to stop the audio when the mouse leaves:
$(YOURMOUSEOVERELEMENT).on('mouseout', function(){$('#sound').stop()});

Stopping instead of rewinding at the end of a video in MediaElement.js

I'm wondering how to stop the MediaElement.js player at the end of the video. I wondered how to stop the mediaelement.js player at the end of a video. I was hoping to hold on the last frame and not rewind to show the first frame as it does now.
Is it possible to change this behaviour?

I wrote a fix for this problem and John merged in version 2.10.2.
There is now an option "autoRewind" that you can set to false to prevent the player from going back to the beginning.
The eventlistener is not added and there is no more need to remove it.
$('video').mediaelementplayer({
autoRewind: false
});

I believe that the default behavior of the <video> element is to go back to the beginning so you'd just need to override this by listening for the ended event.
var player = $('#myvideo').mediaelementplayer();
player.media.addEventListener('ended', function(e) {
player.media.setCurrentTime(player.media.duration);
}, false);
Hope that helps!

Probably the best solution is not to be afraid and remove the "rewind-to-start-on-video-end" handler from mediaelement source.
If you go into the source code for mediaelement and search for "ended", you'll eventually see, that rewinding after reaching end of the video is actually done deliberately by mediaelement.
If you want to remove that functionality feel free to just remove that handler for "ended" event from mediaelement source. That solves all the problems, including flickering between last and first frame, mentioned in some other answers to this question.

The code in John Dyer's answer didn't really work for me either for some reason. I was however able to get this version working...
var videoPlayer = new MediaElementPlayer('#homepage-player', {
loop: false,
features:[],
enablePluginDebug: false,
plugins: ['flash','silverlight'],
pluginPath: '/js/mediaelement/',
flashName: 'flashmediaelement.swf',
silverlightName: 'silverlightmediaelement.xap',
success: function (mediaElement, domObject) {
// add event listener
mediaElement.addEventListener('ended', function(e) {
mediaElement.pause();
mediaElement.setCurrentTime(mediaElement.duration);
}, false);
},
error: function () {
}
});
videoPlayer.play();
The only problem I'm having - which is very frustrating, is it is flickering between the LAST and FIRST frames in Chrome. Otherwise, it works as expected in Firefox and IE...

This problem i faced when playing audio files
The problem is in the play, when you pause your player the file will stop but before resuming you have to decrease the current time of the player by any value in your case you may decrease it by a frame maybe
after setting your source ,loading your file and pausing, then
myplayer.player.play();
var currentTime = myplayer.player.getCurrentTime();
myplayer.player.setCurrentTime(currentTime-0.1);
myplayer.player.setCurrentRail();

Detecting end of Flash movie in javascript

Is there a way to detect end of Flash movie (OOTB, without using some sort of flash callback).
Alternatively, is there a way to know the length of the movie?
Update:
IsPlaying() looked promising (periodically checking it), but as it turns out, nobody is creating straight forward swfs any more; now, the content is embedded in main layer and while the content plays, the main movie is stopped and IsPlaying is always false...

var movie = window.document.movie
if(movie.TCurrentFrame("/") == movie.TotalFrames())
alert("Movie Finished");
or you could have:
if (!movie.IsPlaying())
alert("Movie Stopped");
but thats not really what you're after.

import fl.video.VideoEvent.COMPLETE
video.addEventListener(VideoEvent.COMPLETE, alertHTML);
function alertHTML(e:VideoEvent):void{
ExternalInterface.call("alert(\"Video has stopped\");");
}
Give that a shot. You can replace the alert(\"Video has stopped\"); with your client-side javascript function.

You can chceck for movie length with ffmpeg -i movie.flv 2>&1, but i doesnt' tell you:
how long it takes to load the video and start playing
whether the user has hit the "pause" button.
Right now, the only way is to attach some javascript handlers to Flash events as other posts suggest.