In the last Kids Player post, I made the matched song’s cover fill the whole screen after a voice search. It looked good. Then I used it for a week and found what it was missing.

The Need: The Picture Stayed the Same While the Song Changed

When a song ends, my daughter’s player moves to the next one. With normal tapping, the big cover changes with it. After a voice search, it did not. The new song played under the old picture.

There was also a smaller problem. A three-year-old often wants the same song again. The full-screen view had no repeat button. We had to leave the full screen to find the small repeat button on the mini player.

The Proof: Four Changes From One Message

I typed one long prompt about several things at once. This is my request, translated from Korean:

💬 Prompt that worked “During voice search the thumbnail shows full screen while the song plays, but I can’t see a repeat button. Please show one, or add it to the play button that is already there. Also, when the song picked by voice search ends, the thumbnail doesn’t change and the next song just plays. When I play by normal selection, the full-screen thumbnail changes with the next song, so please do the same for voice search. And add the ability to press and drag the progress bar on the mini player with my finger. But I just checked, and in normal playback the next song’s thumbnail doesn’t show big either. If I play with the big thumbnail on the previous song, please keep showing it big automatically for the next song.”

The last sentence of that prompt is a bug report I found while writing the message. That makes four fixes:

  1. A repeat button on the full-screen voice view. It shares its on/off state with the mini player’s repeat button, so the two never disagree.
  2. The cover and title change when the next song starts automatically, in the voice view.
  3. The big picture stays big in the next song when I started big, in normal playback too.
  4. Drag to seek on the mini player’s progress bar, in all seven players in the app.

After the fix I tried it and wrote back, “It was implemented well.” That is my only check. There was no automated test.

The Story: A Function That Stopped Itself

The cause of the vanishing picture is the kind of bug I find funny afterward.

The function that starts a song in this tab began with a call to stopPapa(). That call was meant to stop whatever was playing before starting the new song. But it also did something I had forgotten: it closed the full-screen picture. So when a song ended and the code started the next one by the same function, the function first stopped itself and took the picture away.

Other tabs didn’t have this bug, because they already swapped the image in a separate step. This tab was the odd one.

The fix was to remove that one call. A few lines connected the full-screen voice view to the same image-swap code the other tabs already had. When the next song has no image, the view simply closes.

The How: Four Small Edits

If you build a similar player in plain JavaScript, these are the pieces.

  • Shared state. A small object keeps the repeat flag for each tab (VOICE_REPEAT). The full-screen button and the mini player both read and write it. Two copies of the same setting will drift apart.
  • Sync function. When the next song starts, one function (voiceCoverSync) updates the cover image and the title from the new song.
  • Drag to seek. Use pointer events (pointerdown, pointermove, pointerup) on the progress bar. While dragging, move the bar to the finger directly instead of waiting for the audio to report its time. The line is only 3px tall, so I made the touch area larger above and below the line without changing how it looks.
  • Edge cases I left alone. The math tab doesn’t move to the next song by itself, so the swap doesn’t apply. One of the book tabs moves to the next book automatically, and I didn’t connect the image swap there. I will if it ever bothers us.

The change is version 2.13 of the app. Time from my message to the deployed fix: about two minutes. Cost: $0.