CSS aligning text next to an <audio> element

I'm trying to vertically align some text so it is halfway down the audio player. Here's what I tried. Where am I going wrong?

<audio autoplay="autoplay" controls="controls">  
<source src="file.ogg" />  
<开发者_StackOverflowsource src="file.mp3" />  
</audio>

<span style="vertical-align: middle">text</span>

---

This works (on firefox, at least), although it might not be the most elegant solution:

<div>
<audio autoplay="autoplay" controls="controls" style="vertical-align: middle;">                                
<source src="file.ogg" />
<source src="file.mp3" />
</audio>
text
</div>

---

Try surrounding everything in a div and styling the vertical alignment of that:

<div id="audio" style="vertical-align: middle;">
   <audio autoplay="autoplay" controls="controls">  
      <source src="file.ogg" />  
      <source src="file.mp3" />  
   </audio>

   <span>text</span>
</div>