chanind / hanzi-writer

Chinese character stroke order animations and practice quizzes
https://hanziwriter.org
MIT License
3.57k stars 557 forks source link

Insert audio #309

Open ay192018 opened 1 year ago

ay192018 commented 1 year ago

How do I insert the audio of each stroke when I execute the animateCharacter method?

ay192018 commented 1 year ago

Or is there a callback function provided for each stroke to handle other

chanind commented 1 year ago

There's not a callback for each stroke on animateCharacter(), although it's not a bad idea to add that feature. Currently to achieve what you're after you'd have to call each animateStroke() method individually. You can pass a callback to do whatever you want, e.g. play audio, then animate the next stroke. Maybe something like:

let strokeNum = 0;
const maxStrokes = 5;
const animateCb = () => {
    writer.animateStroke(strokeNum, { onComplete: animateCb });
    playAudio();
    strokeNum += 1;
    if (strokeNum < maxStrokes) {
        animateCb();
    }
}

animateCb();