Jump to content

PixiJS Sprite touch reject audio on Safari


Recommended Posts

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.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);

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!
Link to comment
Share on other sites

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.




Link to comment
Share on other sites

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.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...