Seems like you're on the right track. After reviewing your JSFiddle, I noticed that the audio is already streaming (you can play the file before it finishes downloading). To confirm this, simply check the Network traffic in your browser:
Chrome indicates 'partial content,' while playing the mp3 concurrently. Your issue appears to be related to downloading and playing too early. Referring to the specifications, there are some options available.
preload = "none" or "metadata" or "auto" or "" (empty string) or empty
This attribute provides a hint to the browser regarding whether optimistic downloading of the audio stream itself or its metadata is worthwhile.
- "none": Indicates to the browser that the user may not require the audio stream, or minimizing unnecessary traffic is preferred.
- "metadata": Suggests to the browser that the user may not need the audio stream but fetching its metadata (duration, etc.) is desirable.
- "auto": Indicates to the browser that optimistically downloading the entire audio stream is preferable.
As you aren't displaying any information about the audio file, we can disregard the metadata option. Therefore, you should set the preload="none" attribute. By dynamically setting this in your JSFiddle like so:
audioElement.setAttribute('preload', "none");
audioElement.setAttribute('src', 'http://www.mfiles.co.uk/mp3-downloads/Toccata-and-Fugue-Dm.mp3');
Check out this JSFiddle for the modified version. If you open the network tab in Chrome, you'll notice that the download only starts when you begin playing the mp3.