diff --git a/src/skins/vector/views/molecules/voip/IncomingCallBox.js b/src/skins/vector/views/molecules/voip/IncomingCallBox.js
index ee437f0a64..c3bcd82584 100644
--- a/src/skins/vector/views/molecules/voip/IncomingCallBox.js
+++ b/src/skins/vector/views/molecules/voip/IncomingCallBox.js
@@ -31,24 +31,28 @@ module.exports = React.createClass({
     },
 
     render: function() {
+
+        // NB: This block MUST have a "key" so React doesn't clobber the elements
+        // between in-call / not-in-call.
+        var audioBlock = (
+            <audio ref="ringAudio" key="voip_ring_audio" loop>
+                <source src="media/ring.ogg" type="audio/ogg" />
+                <source src="media/ring.mp3" type="audio/mpeg" />
+            </audio>
+        );
+
         if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
             return (
                 <div>
-                    <audio ref="ringAudio" loop>
-                        <source src="media/ring.ogg" type="audio/ogg" />
-                        <source src="media/ring.mp3" type="audio/mpeg" />
-                    </audio>
+                    {audioBlock}
                 </div>
             );
         }
         var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
         return (
             <div className="mx_IncomingCallBox">
+                {audioBlock}
                 <img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
-                <audio ref="ringAudio" loop>
-                    <source src="media/ring.ogg" type="audio/ogg" />
-                    <source src="media/ring.mp3" type="audio/mpeg" />
-                </audio>
                 <div className="mx_IncomingCallBox_title">
                     Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
                 </div>