Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lipsync not working: The play() request was interrupted because the media was removed from the document #8

Open
FrancescoCaracciolo opened this issue Jul 22, 2024 · 4 comments
Open

Lipsync not working: The play() request was interrupted because the media was removed from the document #8

FrancescoCaracciolo opened this issue Jul 22, 2024 · 4 comments

Comments

@FrancescoCaracciolo
Copy link

My code:

!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Live2D displayer</title>
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- Load Cubism and PixiJS -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>


<!-- if support for both Cubism 2.1 and 4 -->
<script src="https://cdn.jsdelivr.net/gh/RaSan147/[email protected]/dist/index.min.js"></script>


<canvas id=canvas></canvas>
<script  src="./script2.js"></script>
</body>
</html>
const cubism2Model =
  "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json";
var model_proxy;

(async function main() {
  const app = new PIXI.Application({
    view: document.getElementById("canvas"),
    autoStart: true,
    resizeTo: window
  });

  const model2 = await PIXI.live2d.Live2DModel.from(cubism2Model);

  model_proxy = model2;
  app.stage.addChild(model2);

  model2.scale.set(0.3);

  model2.x = 300;
    model2.on('hit', (hitAreas) => {
        if (hitAreas.includes('head')) {
            model2.speak("https://audio-samples.github.io/samples/mp3/blizzard_primed/sample-4.mp3");
        }
    });
})();

function playAudio(audio_link, volume=1, expression=0) {
    model_proxy.speak(audio_link,{ volume: 1, expression: null, resetExpression: true, crossOrigin: 'anonymous' });
}

I get these errors when trying to play anything:
Chrome:
immagine
Firefox:
immagine
@FrancescoCaracciolo
Copy link
Author

If you need, you can try it here: https://codepen.io/Francesco-Caracciolo/pen/BagzNXe

@RaSan147
Copy link
Owner

I do remember having the issue. Not sure why it happened and how I fixed it. Will check on it. Thanks

@FrancescoCaracciolo
Copy link
Author

I think it is something wrong with browser versions, with older chromium versions that code works, while with newer Chrome/FF version it gives that error

@RaSan147
Copy link
Owner

RaSan147 commented Jul 25, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@RaSan147 @FrancescoCaracciolo