"resetting" an HTML5 audio element

I'm building an audio player, using the default audio controls. The user dynamically selects from a list of tracks which to play.

When the <audio> is first created, no 'src' is defined and load() hasn't been called, and when I click the PLAY button, nothing happens.

Here's the problem: If the user clears all the selections, the player shouldn't have anything to play. I can't find a way (beyond allocating a new <audio> object) to "reset" the player.

If the user clicks the <audio>'s PLAY button it starts playing the last thing that was loaded. If I try to set the 'src' attribute to an empty string, the load() method turns it into some kind of URL. Hitting PLAY starts the player, even if its 'src' is garbage (at least in the browsers I've tried).

Some workarounds include

• Creating my own controls.


• Allocating a new <audio>. This situation shouldn't arise very often, so I guess it's OK, but I'd rather not do it.


• Adding an EventListener("play", playHandler) to intercept when the selection list is empty. But then the player has already started.

I'm sure there are other remedies, but now I'm curious whether a 'reset' is possible.