diff --git a/callattendant/userinterface/templates/calls_view.html b/callattendant/userinterface/templates/calls_view.html
index d1204fa..d4dfad2 100644
--- a/callattendant/userinterface/templates/calls_view.html
+++ b/callattendant/userinterface/templates/calls_view.html
@@ -53,6 +53,7 @@ <h5 class="mb-0">Voice Message</b></h5>
             Your browser does not support the audio element.
           </audio>
         </p>
+        <button id="play-button" type="button" class="btn btn-primary">Play</button>
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete-message">Delete</button>
       </div>
     </div>
@@ -94,7 +95,17 @@ <h6>Delete voice message from {{ caller.phone_no }}?</h6>
     history.back()
 });
 
-// Open the Messages page
+
+// Play the message
+$('#play-button').on('click', function (event) {
+  // It doesn't work with $("#audio").play() like you would expect. The official reason is that
+  // incorporating it into jQuery would add a play() to every element. So instead you have to refer
+  // to it by its position in the array of DOM elements
+  // https://stackoverflow.com/a/38547039/4797523
+  $("#audio")[0].play()
+});
+
+// Delete the messages
 $('#delete-message').on('click', function (event) {
   window.location.href = "/messages/delete/{{ caller.msg_no }}"
 });