I hear the bongo play once just fine. But then, I’m using Chrome which can play OGG files. You might be using a browser that can’t. MP3 is a much better format for playing in just about any browser.
You are right… apparently FIREFOX have issues playing OGG files… I managed to play the sound on the mobile browser… Thanks playcanvas… Will try mp3 to make sure it works on all platforms
2 Likes
I have been trying to make a script that plays a sound when space key is pressed but it wont work I need help
this is what i have:
annonMove.prototype.update = function(dt) {
if( this.app.keyboard.isPressed(pc.input.KEY_RIGHT)){
this.entity.translateLocal(0, 0, -0.3);
}
if( this.app.keyboard.isPressed(pc.input.KEY_LEFT)){
this.entity.translateLocal(0, 0, 0.3);
}
if ( this.app.keyboard.isPressed(pc.KEY_SPACE)){
this.entity.sound.play(‘Sound’);
} else{
this.entity.sound.stop(‘Sound’);
}
};
Can you share the project please?
https://playcanvas.com/project/551202 this is it. When i run the project it says “Cannot read property ‘play’ of undefined”
You are trying to access a sound component on the cannon where there is none, hence the error.
Have a look on some of the tutorials and project samples for audio here: https://developer.playcanvas.com/en/tutorials/?tags=audio
I added a sound component and everything but i just cant play audio from a script!
You are trying to play sound ‘Boom’ but your sound slot name is still ‘Slot 1’.
Now i am not getting an error when i press space but no audio is playing.
You need to remove the boolean. As it is, every frame the game checks to see if the button is pressed, and because of how frequently that is your boolean playing gets set true, and then false instantly, so no sound. if(app.keyboard.isPressed(pc.KEY_SPACE)) is enough on it’s own to trigger the sound event. If you have a problem with the sound continuing to play after the key has been released, just turn off loop.
EDIT: I stand corrected, I’m not getting sound when I test this.
On Chrome there’s a google policy change and a warning in console that says “The AudioContext was not allowed to start. It must be resume (or created) after a user gesture on the page. https://goo.gl/7K7WLu”
I am not sure I understand.
What this means is that Google Chrome has done something that I think is fairly silly. My understanding is that they’ve broken the audio for every HTML5 game until the developers of said game add extra code to re-enable the audio based on a user gesture event.
While this is the case, I’ve simply moved to using and recommending Firefox to all users of my game
Maybe the PlayCanvas devs can implement a workaround for Chrome’s arbitrary restrictions in the engine itself, but until then we have to handle it ourselves.
Oh okay now i get it
My audio has been working now that I have been using Microsoft edge
Try adding this code in the initialize function of one of your scripts:
var app = this.app;
var resumeContext = function () {
app.systems.sound.manager.context.resume();
window.removeEventListener('mousedown', resumeContext);
window.removeEventListener('touchend', resumeContext);
};
window.addEventListener('mousedown', resumeContext);
window.addEventListener('touchend', resumeContext);
This should fix the Chrome policy change.
1 Like
This works thank you so much
Hey i developing a simple scene where there is a TV set and inside TV a video play on user interaction.
Everything works well but AUDIO is not playing along with the video. Can anyone let me know the solution to this ?
I’m using the same video texture script given in the Video Tutorial with some changes. Just for you reference i’m pasting it below as well.
var Videotexture = pc.createScript(‘videotexture’);
Videotexture.attributes.add(‘materials’, {
type: ‘asset’,
assetType: ‘material’,
array: true
});
Videotexture.attributes.add(‘video’, {
type: ‘asset’
});
// initialize code called once per entity
Videotexture.prototype.initialize = function() {
var app = this.app;
// Create a texture to hold the video frame data
var videoTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R5_G6_B5,
autoMipmap: false
});
videoTexture.minFilter = pc.FILTER_LINEAR;
videoTexture.magFilter = pc.FILTER_LINEAR;
videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
// Create HTML Video Element to play the video
var video = document.createElement('video');
video.setAttribute("playsinline",null);
video.addEventListener('canplay', function (e) {
videoTexture.setSource(video);
});
video.src = this.video.getFileUrl();
video.crossOrigin = 'anonymous';
video.loop = true;
// video.playsinline = true;
video.muted = true; // This line allows video to play without prior interaction from the user
// Get the material that we want to play the video on and assign the new video
// texture to it.
for (var i = 0; i < this.materials.length; i++) {
var material = this.materials[i].resource;
material.emissiveMap = videoTexture;
material.update();
}
this.videoTexture = videoTexture;
this.upload = true;
this.app.on('start-demo', function () {
video.play();
});Web browsers now only play back video without user interaction if sound is muted which is done in the code your have used above
video.muted = true; // This line allows video to play
To enable audio, you have to do so as part of a user interaction event (such as a mouse click)
Exclusive for iOS, it’s not at all working, anyway the code we tried mentioned below.
var startSound = function () {
document.removeEventListener(‘click’, startSound);
alert(‘ihwbfifhwebciehb’);
audio.play();
};
//var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
//if (isIOS)
document.addEventListener(‘click’, startSound);
Note: This code is working for Android and desktop.
You will have to check around play back of video/audio on iOS in the web development resources. I don’t have an iOS device to check.
From a quick Google, you may have to show video controls for sound to be allowed in a video: https://vsatips.com/2017/07/03/no-sound-on-videos-in-safari-ios-10-12/