diff --git a/resources/html/webrtcgateway/test/components/app.jsx b/resources/html/webrtcgateway/test/components/app.jsx
index 7e1a059..8609e0d 100644
--- a/resources/html/webrtcgateway/test/components/app.jsx
+++ b/resources/html/webrtcgateway/test/components/app.jsx
@@ -1,162 +1,167 @@
 
 var SylkTest = React.createClass({
     getInitialState: function() {
         return {
             connection: null,
             connectionState: null,
             account: null,
             registrationState: null,
             currentCall: null,
             callState: null,
         };
     },
 
     getServerUrl: function() {
         return window.location.protocol.replace('http', 'ws') + '//' + window.location.host + '/webrtcgateway/ws';
     },
 
     connectionStateChanged: function(oldState, newState) {
         switch (newState) {
             case 'closed':
                 this.setState({connection: null, connectionState: newState});
                 break;
             case 'disconnected':
                 if (this.state.currentCall) {
                     this.state.currentCall.terminate();
                 }
                 this.setState({account: null, registrationState: null, currentCall: null, callState: null, connectionState: newState});
                 break;
             default:
                 this.setState({connectionState: newState});
                 break;
         }
     },
 
     registrationStateChanged: function(oldState, newState, data) {
         var state = newState;
         if (newState === 'failed') {
             state += ' (' + data.reason + ')'
         }
         this.setState({registrationState: state});
     },
 
     callStateChanged: function(oldState, newState, data) {
         var state = newState;
         var currentCall = this.state.currentCall;
         if (newState === 'terminated') {
             state += ' (' + data.reason + ')';
             currentCall = null;
             setTimeout(() => {
                 if (this.state.currentCall === null) {
                     this.setState({callState: null});
                 }
             }, 4000);
         }
         this.setState({currentCall: currentCall, callState: state});
     },
 
     setAccount: function(account) {
         if (account !== null) {
             account.on('registrationStateChanged', this.registrationStateChanged);
             account.on('incomingCall', this.handleNewCall);
             account.on('outgoingCall', this.handleNewCall);
         }
         this.setState({account: account});
     },
 
     handleNewCall: function(call) {
         if (this.state.currentCall !== null) {
             call.terminate();
         } else {
             call.on('stateChanged', this.callStateChanged);
             this.setState({currentCall: call, callState: call.state});
         }
     },
 
     toggleConnect: function(event) {
         event.preventDefault();
         if (this.state.connection === null) {
             var connection = sylkrtc.createConnection({server: this.getServerUrl()});
             connection.on('stateChanged', this.connectionStateChanged);
             this.setState({connection: connection});
         } else {
             this.state.connection.close();
         }
     },
 
     render: function() {
         var accountBox;
         var callBox;
         var videoBox;
+        var ringtonePlayer;
         if (sylkrtc.isWebRTCSupported()) {
             accountBox = <AccountBox connection={this.state.connectionState === 'ready' ? this.state.connection : null} setAccount={this.setAccount}/>;
             if (this.state.callState === 'established') {
                 videoBox = <VideoBox call={this.state.currentCall}/>
             } else {
+                if (this.state.currentCall) {
+                    ringtonePlayer = <RingtonePlayer/>
+                }
                 if (this.state.currentCall === null || this.state.currentCall.direction === 'outgoing') {
                     callBox = <OutgoingCall account={this.state.account}/>
                 } else {
                     callBox = <IncomingCall call={this.state.currentCall}/>
                 }
             }
         } else {
             accountBox = <div>
                             <h2>Your browser does not support WebRTC</h2>
                             <p>
                                 Too bad! Checkout the WebRTC support across browsers in the link below.
                                 <br/>
                                 <a href="http://iswebrtcreadyyet.com/">Is WebRTC ready yet?</a>
                             </p>
                         </div>;
         }
         return (
             <div>
                 <nav className="navbar navbar-inverse">
                     <div className="container">
                         <div className="navbar-header">
                             <a href="#" className="navbar-brand">SylkServer WebRTC Test App</a>
                         </div>
                         <button type="button" className="btn btn-primary navbar-btn pull-right" onClick={this.toggleConnect}>
                             {this.state.connection ? "Disconnect" : "Connect"}
                         </button>
                     </div>
                 </nav>
                 <div className="container">
                     <br/>
                     <div className="panel panel-default">
                         <div className="panel-body">
                             {accountBox}
                             <hr/>
                             {videoBox}
                             {callBox}
+                            {ringtonePlayer}
                             <br/>
                             <br/>
                         </div>
                         <div className="panel-footer">
                             WebSocket server &#8212; {this.getServerUrl()}
                         </div>
                     </div>
                 </div>
                 <nav className="navbar navbar-inverse navbar-fixed-bottom">
                     <div className="container">
                         <p className="navbar-text">
                             <span className="label label-default">Connection</span>
                             &nbsp;
                             <span className="label label-info">{this.state.connectionState || "disconnected"}</span>
                         </p>
                         <p className="navbar-text">
                             <span className="label label-default">Registration</span>
                             &nbsp;
                             <span className="label label-info"> {this.state.registrationState || "unregistered"}</span>
                         </p>
                         <p className="navbar-text">
                             <span className="label label-default">Call status</span>
                             &nbsp;
                             <span className="label label-info">{this.state.callState || "idle"}</span>
                         </p>
                     </div>
                 </nav>
             </div>
         );
     }
 });
diff --git a/resources/html/webrtcgateway/test/components/ringtoneplayer.jsx b/resources/html/webrtcgateway/test/components/ringtoneplayer.jsx
new file mode 100644
index 0000000..e12a225
--- /dev/null
+++ b/resources/html/webrtcgateway/test/components/ringtoneplayer.jsx
@@ -0,0 +1,30 @@
+
+var RingtonePlayer = React.createClass({
+    audioEnded: function() {
+        this.timeout = setTimeout(() => {
+            this.refs.audio.getDOMNode().play();
+        }, 4500);
+    },
+
+    componentDidMount: function() {
+        this.refs.audio.getDOMNode().addEventListener('ended', this.audioEnded);
+    },
+
+    componentWillUnmount: function() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+        }
+        this.timeout = null;
+        this.refs.audio.getDOMNode().removeEventListener('ended', this.audioEnded);
+    },
+
+    render: function() {
+        return (
+            <div>
+                <audio autoPlay ref='audio'>
+                    <source src='sounds/ringtone.wav' type="audio/wav"/>
+                </audio>
+            </div>
+        );
+    }
+});
diff --git a/resources/html/webrtcgateway/test/index.html b/resources/html/webrtcgateway/test/index.html
index 12d7994..5d5243f 100644
--- a/resources/html/webrtcgateway/test/index.html
+++ b/resources/html/webrtcgateway/test/index.html
@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>SylkServer WebRTC Test Application</title>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
     <script src="../js/sylkrtc.js"></script>
     <script type="text/jsx" src="components/accountbox.jsx"></script>
     <script type="text/jsx" src="components/incomingcall.jsx"></script>
     <script type="text/jsx" src="components/outgoingcall.jsx"></script>
     <script type="text/jsx" src="components/videobox.jsx"></script>
+    <script type="text/jsx" src="components/ringtoneplayer.jsx"></script>
     <script type="text/jsx" src="components/app.jsx"></script>
   </head>
   <body>
     <script type="text/jsx">
       React.render(<SylkTest/>, document.body);
     </script>
   </body>
 </html>
diff --git a/resources/html/webrtcgateway/test/sounds/ringtone.wav b/resources/html/webrtcgateway/test/sounds/ringtone.wav
new file mode 100644
index 0000000..e72dd50
Binary files /dev/null and b/resources/html/webrtcgateway/test/sounds/ringtone.wav differ