I'm currently working with soundmanager2 in an IE/flash context (not html5). The issue is that audio playback of mp3 content does not occur for the following case where the 'onload' callback function is defined as null OR as a function that does almost nothing.
soundManager.createSound({
id: 'someidforasoundfile',
url: 'pathtoaudiofile.mp3',
autoLoad: true,
autoPlay: true,
onload: function() {
return 1;
},
volume: 50
});
If I define the "onload" callback as:
function() { alert('zing'); }
soundmanager2 will actually start playing the audio file...but there's an annoying alert pop up that the user has to contend with.
Is this a soundmanager2 configuration issue or something else?
Thanks in advance!
ct
I think im understanding is that when a user indicates a stream, theres a message alert to indicate that the song is starting or they have to let permission.
I would say its soundmanager, As flash can stream or download media content with out any "USER" permissions.
this is limited/ restricted of course to:Examples mp3,video,other SWF files.ect
but say downloading zipfiles or other media types may need permissions.
They maybe something in the (alert) function, to create this message or pop up to appear, check that source code and follow its script.
if you have some source code for this please post i will take a look at it
Related
The MDN docs on video.play detail how it returns a Promise in modern browsers and that it will be rejected if the video cannot be played.
In my tests, I have found that this works well for when a video is not played, because of autoplay policies issues, such as not being muted, however, I am also seeing that it does not get rejected if the URL for the video 404s or is of the wrong content type.
Is there any way to catch loading errors like this? Or would this be a feature request for Chrome, Firefox, Safari, and others?
I have a sample codepen here: https://codepen.io/mrcoles/pen/abzJPaQ
In it I generate videos based on the following configs:
const ROWS = [
{
title: 'Video URL is good',
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
muted: true
},
{
title: 'Video URL is a 404',
src: '/DOES-NOT-EXIST.mp4',
muted: true
},
{
title: 'Video URL is a bad source type (HTML page instead of video)',
src: 'https://www.example.com/',
muted: true
},
{
title: 'Video URL is good, but not muted',
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
muted: false
}
];
Here’s a screenshot of the results:
Failure to load files needs to be watched separately by attaching an "error" event to the source elements inside the video (or maybe the video if the src is specified directly on it without source elements).
sourceElt.addEventListener('error', evt => {
console.log('Error');
});
I updated my codepen to add an example with multiple source elements inside a video. Since videos elements are built to try multiple, you should only listen for errors on the last source element (or maybe sum errors until you match the # of sources—I haven’t verified if things can expect to run top down).
Helpful info was provided in comments by #AdamH pointing to this other post: https://stackoverflow.com/a/33471125/376489
I've used RecordRTC in order to record audio and send it to a speech-to-text API.
Somehow, it all works perfectly fine except for using Safari IOS.
While using Safari IOS, the recording which I'm retrieving as base64 string,
is somehow returned empty from the recorder object.
Previous questions asked about it were answered to use another library,
yet the docs for RecordRTC specifically says it fully supports Safari IOS.
Could you please help me figuring out the problem and finding a workaround?
My code:
async initMic() {
let stream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
mic = new RecordRTCPromisesHandler(stream, {
type: 'audio',
mimeType: 'audio/wav',
recorderType: RecordRTC.StereoAudioRecorder,
sampleRate: 48000,
numberOfAudioChannels: 1,
});
},
async sendRecording() {
let vm = this;
mic.stopRecording(function() {
mic.getDataURL(function(dataURL) {
vm.$store.dispatch('UpdateAudioBase64', dataURL.replace('data:audio/wav;base64,', ''));
mic.reset();
vm.$emit('send-recording');
});
});
},
** The string 'replace' function is meant to remove the base64 header
before sending it to speech-to-text API (API's needs).
Thank You!
If not mistaken, apple fu... messed up again with their dumb policy,
problem is you can't do a lot of things(like setting up recorder)
without USER trigger them,
so you should wrap your recorder in click event listener,
user click button, then your mic = new RecordRTCPromisesHandler(stream, {... etc
fires and recording starts.
check this example https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/audio-recording.html
here this trick works
btw your code works in mac safari?
I have this problem where in firefox the speech gets cut off if the page is auto-refreshed, but in google chrome it finishes saying the speech even if the page is auto-refreshed. How do I fix it so that the speech doesn't get cut off in firefox even when the page is auto-refreshed?
msg = new SpeechSynthesisUtterance("please finish saying this entire sentence.");
window.speechSynthesis.speak(msg);
(function ($) {
'use strict';
if (window == window.top) {
var body = $('body').empty();
var myframe = $('<iframe>')
.attr({ src: location.href })
.css({ height: '95vh', width: '100%' })
.appendTo(body)
.on('load', function () {
var interval;
interval = 750;
setTimeout(function () {
myframe.attr({ src: location.href });
}, interval);
});
}
})(jQuery);
I have this problem where in firefox the speech gets cut off if the
page is auto-refreshed, but in google chrome it finishes saying the
speech even if the page is auto-refreshed.
The described behaviour for Firefox is a sane expected implementation.
Browsing the source code of Firefox and Chromium the implementation of speechSynthesis.speak() is based on a socket connection with the local speech server. That server at *nix is usually speech-dispatcher or speechd (speech-dispatcher). See How to programmatically send a unix socket command to a system server autospawned by browser or convert JavaScript to C++ souce code for Chromium? for description of trying to implement SSML parsing at Chromium.
Eventually decided to write own code to achieve that requirement using JavaScript according to the W3C specification SpeechSynthesisSSMLParser after asking more than one question at SE sites, filing issues and bugs and posting on W3C mailings lists without any evidence that SSML parsing would ever be included as part of the Web Speech API.
Once that connection is initiated a queue is created for calls to .speak(). Even when the connection is closed Task Manager might still show the active process registered by the service.
The process at Chromium/Chrome is not without bugs, the closest that have filed to what is being described at the question is
Issue 797624: "speak speak slash" is audio output of .speak() following two calls to .speak(), .pause() and .resume()
Why hasn't Issue 88072 and Issue 795371 been answered? Are Internals>SpeechSynthesis and Blink>Speech dead? (for possible reason why "but in google chrome it finishes saying the speech even if the page is auto-refreshed." is still possible at Chrome)
.volume property issues
Issue 797512: Setting SpeechSynthesisUtterance.volume does not change volume of audio output of speechSynthesis.speak() (Chromium/Chrome)
Bug 1426978 Setting SpeechSynthesisUtterance.volume does not change volume of audio output of speechSynthesis.speak() (Firefox)
The most egregious issue being Chromium/Chrome webkitSpeechReconition implementation which records the users' audio and posts that audio data to a remote service, where a transcript is returned to the browser - without explicitly notifying the user that is taking place, marked WONT FIX
Issue 816095: Does webkitSpeechRecognition send recorded audio to a remote web service by default?
Relevant W3C Speech API issues at GitHub
The UA should be able to disallow speak() from autoplaying #27
Precisely define when speak() should fail due to autoplay rules #35 (ironically, relevant to the reported behaviour at Chromium/Chrome and output described at this question, see Web Audio, Autoplay Policy and Games and Autoplay Policy Changes)
Intent to Deprecate: speechSynthesis.speak without user activation
Summary
The SpeechSynthesis API is actively being abused on the web. We don’t have hard data on abuse, but since other autoplay avenues are
starting to be closed, abuse is anecdotally moving to the Web Speech
API, which doesn't follow autoplay rules.
After deprecation, the plan is to cause speechSynthesis.speak to
immediately fire an error if specific autoplay rules are not
satisfied. This will align it with other audio APIs in Chrome.
Timing of SpeechSynthesis state changes not defined #39
Timing of SpeechSynthesisUtterance events firing not defined #40
Clarify what happens if two windows try to speak #47
In summary, would not describe the behaviour at Firefox as a "problem", but the behaviour at Chrome as being a potential "problem".
Diving in to W3C Web Speech API implementation at browsers is not a trivial task. For several reasons. Including the apparent focus, or available option of, commercial TTS/SST services and proprietary, closed-source implementations of speech synthesis and speech recognition in "smart phones"; in lieu of fixing the various issues with the actual deployment of the W3C Web Speech API at modern browsers.
The maintainers of speechd (speech-dispatcher) are very helpful with regards to the server side (local speech-dispatcher socket).
Cannot speak for Firefox maintainers. Would estimate it is unlikely that if a bug is filed relevant to the feature request of continuing execution of audio output by .speak() from reloaded window is consistent with recent autoplay policies implemented by browsers. Though you can still file a Firefox bug to ask if audio output (from any API or interface) is expected to continue during reload of the current window; and if there are any preferences or policies which can be set to override the described behaviour, as suggested at the answer by #zip. And get the answer from the implementers themselves.
There are individuals and groups that compose FOSS code which are active in the domain and willing to help SST/TTS development, many of which are active at GitHub, which is another option to ask questions about how to implement what you are trying to achieve specifically at Firefox browser.
Outside of asking implementers for the feature request, you can read the source code and try create one or more workarounds. Alternatives include using meSpeak.js, though that still does not necessarily address if Firefox is intentionally blocking audio output during reload of the window.
Not sure why there's a difference in behavior... guest271314 might be on to something in his answer. However, you may be able to prevent FF from stopping the tts by intercepting the reload event with a onbeforeunload handler and waiting for the utterance to finish:
msg = new SpeechSynthesisUtterance("say something");
window.speechSynthesis.speak(msg);
window.onbeforeunload = function(e) {
if(window.speechSynthesis.speaking){
event.preventDefault();
msg.addEventListener('end', function(event) {
//logic to continue unload here
});
}
};
EDITED: See more elegant solution with promises below initial answer!
Below snippet is a workaround to the browser inconsistencies found in Firefox, checking synth.speaking in the interval and only triggering a reload if it's false prevents the synth from cutting of prematurely:
(It does not NOT work properly in the SO snippet, I assume it doesn't like iFrames in iFrames or whatever, just copy paste the code in a file and open it with Firefox!)
<p>I'm in the body, but will be in an iFrame</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var synth = window.speechSynthesis;
msg = new SpeechSynthesisUtterance("please finish saying this entire sentence.");
synth.speak(msg);
(function ($) {
'use strict';
if (window == window.top) {
var body = $('body').empty();
var myframe = $('<iframe>')
.attr({ src: location.href })
.css({ height: '95vh', width: '100%' })
.appendTo(body)
.on('load', function () {
var interval;
interval = setInterval(function () {
if (!synth.speaking) {
myframe.attr({ src: location.href });
clearInterval(interval);
}
}, 750);
});
}
})(jQuery);
</script>
A more elaborate solution could be to not have any setTimeout() or setInterval() at all, but use promises instead. Like this the page will simply reload whenever the message is done synthesizing, no matter how short or long it is. This will also prevent the "double"/overlapping-speech on the initial pageload. Not sure if this helps in your scenario, but here you go:
<button id="toggleSpeech">Stop Speaking!</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
if (window == window.top) {
window.speech = {
say: function(msg) {
return new Promise(function(resolve, reject) {
if (!SpeechSynthesisUtterance) {
reject('Web Speech API is not supported');
}
var utterance = new SpeechSynthesisUtterance(msg);
utterance.addEventListener('end', function() {
resolve();
});
utterance.addEventListener('error', function(event) {
reject('An error has occurred while speaking: ' + event.error);
});
window.speechSynthesis.speak(utterance);
});
},
speak: true,
};
}
(function($) {
'use strict';
if (window == window.top) {
var body = $('body').empty();
var myframe = $('<iframe>')
.attr({ src: location.href })
.css({ height: '95vh', width: '100%' })
.appendTo(body)
.on('load', function () {
var $iframe = $(this).contents();
$iframe.find('#toggleSpeech').on('click', function(e) {
console.log('speaking will stop when the last sentence is done...');
window.speech.speak = !window.speech.speak;
});
window.speech.say('please finish saying this entire sentence.')
.then(function() {
if ( window.speech.speak ) {
console.log('speaking done, reloading iframe!');
myframe.attr({ src: location.href });
}
});
});
}
})(jQuery);
</script>
NOTE: Chrome (since v70) does NOT allow the immediate calling of window.speechSynthesis.speak(new SpeechSynthesisUtterance(msg)) anymore, you will get an error speechSynthesis.speak() without user activation is no longer allowed..., more details here. So technically the user would have to activate the script in Chrome to make it work!
Firefox:
First of all type and search for the “about: config” inside the browser by filling it in the address bar. This will take to another page where there will be a pop up asking to Take Any Risk, you need to accept that. Look for the preference named “accessibility.blockautorefresh” from the list and then right-click over that. There will be some options appearing as the list on the screen, select the Toggle option and then set it to True rather than False. This change will block the Auto Refresh on the Firefox browser. Remember that this option is revertable!
How do I stop showing the Network Error message and just autoreload the player when the player lose the connections with the stream?
I am using an HLS stream for this player: MediaElementJS
I found this solution in a blog but for me it is not the best option and can be difficult to set up a private proxy 24hs.
This can be solved externally by running an in-app proxy. I have the player in a wrapper that also starts up an HTTPListener. Then instead of giving the MediaElement http://server.com/file.m3u8, I rewrite this URL to http://localhost:58392/http/80/server.com/file.m3u8. FFmpeg hits the proxy with requests and the proxy parses the URL from the request, gets the content and returns it to ffmpeg.
This is my player configuration in js:
<script>
$("video").mediaelementplayer({
features: ["playpause", "volume", "progress", "airplay", "chromecast", "fullscreen"],
forceLive: true
});
playerObject = document.getElementById("player");
</script>
The solution is a two-step process:
First you need to attach an event to notify you of the player being created:
$("video").mediaelementplayer({
features: ["playpause", "volume", "progress", "airplay", "chromecast", "fullscreen"],
forceLive: true,
success: playerReady
});
Now, after the player is created, you can attach to the "ended" event of the player:
function playerReady(media, node, player) {
media.addEventListener('ended', function(e) {
//Do what you want, e.g. reload the page
});
}
I was trying to make my first website.
I'm working on local, so if you need an online website for debug it, I can upload it.
I want to create a preload section on the first visit where show a preload bar/% progress and load all elements before show the page.
I'm doing the audio part and the preloader of the website.
To accomplish this part, I'm using howler.js for audio management and preloadjs.js for the preloader part.
The problem that I can not solve is to start the mp3 at the complete function of the mp3 load.
Below is the code I used.
This is the music part with howler.
var baseurl = document.location.origin;
var soundfolder = baseurl+'/alink/wp-content/themes/alink/media/sounds/';
//SOUNDS EFFECTS
var bgmusic = [soundfolder+'background.mp3', soundfolder+'background.ogg'];
//Music background
var musicbg = new Howl({
src: [bgmusic[0], bgmusic[1]],
loop: true,
volume: 0.5,
preload: false,
});
This is the preloader part with prealodjs.
//PRELOADER
var manifest;
var preload;
function setupManifest() {
manifest = [{
src: baseurl+"/alink/wp-content/themes/alink/media/sounds/background.mp3",
id: "mp3file"
}
];
}
function startPreload() {
preload = new createjs.LoadQueue(true);
preload.on("fileload", handleFileLoad);
preload.on("progress", handleFileProgress);
preload.on("complete", loadComplete);
preload.on("error", loadError);
preload.loadManifest(manifest);
}
function handleFileLoad(event) {
console.log("A file has loaded of type: " + event.item.type);
}
function loadError(evt) {
console.log("Error!",evt.text);
}
function handleFileProgress(event) {
}
function loadComplete(event) {
console.log("Finished Loading Assets");
musicbg.play();
}
setupManifest();
startPreload();
Following some tutorials and js library guidelines, in the howler call I entered the "preload: false" parameter.
Without the preload part and without the "preload: false" parameter, the musical part works perfectly.
By inserting the parameter and the code part of the preloader, when the loadComplete() function is called, the music does not start. (in the console the function is called correctly.
I really can not figure out where the problem is, so I ask you what I'm doing wrong. I think there is a missing part where the file loaded from preloadjs functions is not related to howler call and it can't find the mp3 file in the cache.
Thank you very much for your help.
if you load audio using PreloadJS without SoundJS "installed" to assist with preloading, the audio can only be loaded as HTMLAudio, which is pretty limited. I am fairly certain Howler uses the WebAudio context, so it would just re-load the audio when it needs it.
PreloadJS is really only designed to load WebAudio sounds to be played with SoundJS. In fact, it actually uses a lot of shared code to download and prepare audio for playback. This is not necessarily by design (to prevent usage of other libraries), but WebAudio uses a shared audio context when preloading audio buffers, and PreloadJS knows how to share that context with SoundJS. Howler is probably similar, where it preloads using an audio context it knows how to work with.
As a maintainer of the CreateJS libraries I am certainly biased, but if you want to preload audio with PreloadJS, then SoundJS is a better option than Howler.
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound); // Tell PreloadJS to use SoundJS to load audio
// ... other queue stuff
// After loading is done:
createjs.Sound.play("soundId");
Hope that helps.