PixiJS Sprite touch reject audio on Safari

[lamfan]

const app = new PIXI.Application({
    view: canvasRef.current,
    width: RESOLUTION.width,
    height: RESOLUTION.height - 80,
    resolution: 2,
    antialias: false,
    backgroundColor: 0xefefef,
});

const container = new PIXI.Container();
container.sortableChildren = true;
app.stage.addChild(container);
app.stage.interactive = true;
app.stage.hitArea = app.screen;
app.stage.on('pointerup', onDragEnd);
app.stage.on('pointerupoutside', onDragEnd);

const c32 = PIXI.Sprite.from('images/cards/c32f.png');
c32.interactive = true;
c32.position.set(0, 0);
c32.rotation = QA_CARD[0].rotation;
c32.on('pointerdown', onDragStart, c32);
container.addChild(c32);

function onDragStart() {
    new Audio('1.mp3').play(); 
}
function onDragEnd() {
    new Audio('1.mp3').play();
}

the onDragStart() audio is playing but onDragEnd() audio is reject by The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. Please help!

[Solserv]

Hi! It is required to play a music onDragEnd? Because playing music is required user gesture like point, tap, swipe etc. But when pointer is up then no such gesture  done. 

This causes the issue you are facing. One of the solution, I used to do is play the file on pointer down, both audios files, 1 is played and other played, paused and set the currentTime to 0.

After you can play the audio file on dragend, because the file is loaded by user gesture and once loaded can be played at any where in the game, So it can be playable on dragend. 

 

Hope my solution may help you.

 

Regards

Solserv

[Solserv]

Also, store the object in some variable, in place of creating new audio object every drag event.

Initiate the audio object in the code somewhere and call the object in drag event.