I’m using in my project phaser#3.24.0 and I have a problem with games on Safari 13.1.
In my preload method I have my loadConfig object with sound data:
var data = {
mediaURL: "../../../static/sound/",
dataObjects: [
{ type: "sound", name: "ok", file: "ok.ogg" },
{ type: "sound", name: "wrong", file: "wrong.ogg" },
{ type: "sound", name: "missing", file: "missing.png" },
],
};
loadData(data, this);
Helper function:
function loadData(data, game) {
data.loadObjects.forEach((element) => {
game.load.audio(element.name, config.mediaURL + element.file);
}
}
In my create method:
this.sound.add("ok")
When I load the scene I get:
Error: There is no audio asset with key “ok” in the audio cache
initialize — phaser.min.js
add — phaser.min.js
create — culture.js
create — phaser.min.js
On other browsers everything works fine, I don’t have problems with this.
**: this.sound.add("ok")
This is not working, I have all my paths to the file etc in the game scene entries/data. But it seems no to be added in a create method - only in safari.
Safari doesn't support Ogg Vorbis.
Solution: there need to be an alternative in .mp3 format for Safari. Safari cannot proceed .oog files.
As other said here, Safari doesn't support .ogg format - https://caniuse.com/ogg-vorbis
So you should create a substitute sound with the extension mp3, m4a or something else depend on your research(I personally use m4a).
In order to load 2 sounds, one as back up, in Phaser do something like this:
scene.load.audio("ok", ["ok.ogg", "ok.m4a"]);
You can load an array of sounds with the same key, and the successful sound will play.
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/audio/#load-audio-file
Although you would need to change a bit your loadData() function to match an array of files.
Related
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 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.
I suddenly get the following error on my webapp when using chrome:
Failed to construct 'RTCPeerConnection': Failed to initialize native PeerConnection.
I believe it was because of a chrome update
I'm using adapter.js v1.0.2(latest)
This doesn't occur in firefox. I think it's because of my constraints object. Here it is
options = {
iceServers:[
{
url:'stun:12.345.678.910:3478'
},
{
url: "turn:#12.345.678.910:3479",
username:"ninefingers",
credential:"youhavetoberealistic"
}
]
};
I made sure the turn server was running. I think the options object format has changed. Using chrome 48.0.2564.116 on ubuntu and mac os x.
I doubt that this is an adapter.js issue, in your ice server config for turn url, there is an unnecessary #, that must be the issue. Probably firefox just ignores it, but chrome is more strict, change code to:
...
urls: "turn:12.345.678.910:3479",
...
Edit: based on jib's comment that url is deprecated and must be replaced with urls, the new code would be:
options = {
iceServers:[
{
urls:'stun:12.345.678.910:3478'
},
{
urls: "turn:12.345.678.910:3479",
username:"ninefingers",
credential:"youhavetoberealistic"
}
]
};
I have an asterisk for web(calls in the website only) working, on PC, but when I run the same client on my android 5 no sound, at least not in my android, it does send voice to PC, but just cant reproduce the incomming voice.
Everthing seems to be just fine with my asterisk, it shows in call:
servidor-asterisk*CLI> core show channels
Channel Location State Application(Data)
SIP/002670-0000003d (None) Up AppDial((Outgoing Line))
SIP/000001-0000003c 002670#from-internal Up Dial(SIP/002670,60)
2 active channels
1 active call
31 calls processed
But in eclipse console i receive code 405 from android:
"__tsip_transport_ws_onmessage", source: http://IP/videoNodeJs/scripts/sip_api.js (1)
"recv=OPTIONS sip:000001#df7jal23ls0d.invalid;rtcweb-breaker=no;transport=ws SIP/2.0
"Not implemented", source: http://IP/videoNodeJs/scripts/sip_api.js (1)
"SEND: SIP/2.0 405 Method Not Allowed
Any suggestions?
UPDATE:
SIPML5 Client:
<audio id="audio-remote"/>
var opcoes_chamada = {
audio_remote: document.getElementById('audio-remote'),
screencast_window_id: 0x00000000, // entire desktop
bandwidth: { audio:undefined, video:undefined },
video_size: { minWidth:undefined, minHeight:undefined, maxWidth:undefined, maxHeight:undefined },
events_listener: { events: '*', listener: sipEventsListener },
sip_caps: [
{ name: '+g.oma.sip-im' },
{ name: 'language', value: '\"en,fr\"' }
]
};
To make a call:
callSession = sipStack.newSession('call-audio', opcoes_chamada);
callSession.call(sip_id_d);
To answere a call:
e.newSession.setConfiguration(opcoes_chamada);
e.newSession.accept();
405 Method Not Allowed
The method specified in the Request-Line is understood, but not
allowed for the address identified by the Request-URI.
The response MUST include an Allow header field containing a
list of valid methods for the indicated address.
Some interpretation of this, any chance that everthing is fine but the audio TAG is the problem in the mobile client? If not, what is the 'address identified by the Request-URI'?
So, it's working.
Here is the deal, the SIP was just fine, the client to. The hole problem was a chrome limitation that makes necessary a click from the user to play any sound in the browser, it's something like this:
I have my audio tag:
<audio id="audio-remote"/>
and later I feed the source with sipml5:
var opcoes_chamada = {
audio_remote: document.getElementById('audio-remote'),
screencast_window_id: 0x00000000, // entire desktop
bandwidth: { audio:undefined, video:undefined },
video_size: { minWidth:undefined, minHeight:undefined, maxWidth:undefined, maxHeight:undefined },
events_listener: { events: '*', listener: sipEventsListener },
sip_caps: [
{ name: '+g.oma.sip-im' },
{ name: 'language', value: '\"en,fr\"' }
]
};
And here is the catch, the audio tag it's been feed with the SIPML5 source, but it's in pause( or hold, dont know what...) as long the user don't give a onclick action, so right after the 2 lines to make and answere a call I add a button with:
onClick="document.getElementById('audio-remote').play();"
and everthing finally works!
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