diff --git a/app/views/music1.twig b/app/views/music1.twig
index d9fea54..ca826be 100644
--- a/app/views/music1.twig
+++ b/app/views/music1.twig
@@ -1,7 +1,6 @@
 {% extends 'templates/default.twig' %}
 
 {% block javascripts %}
-  <script type="text/javascript" src="/js/modules/music-player.js"></script>
   <script type="text/javascript" src="/js/music.js"></script>
 {% endblock %}
 
diff --git a/app/views/music2.twig b/app/views/music2.twig
index 52b6eb2..3630acd 100644
--- a/app/views/music2.twig
+++ b/app/views/music2.twig
@@ -1,7 +1,6 @@
 {% extends 'templates/default.twig' %}
 
 {% block javascripts %}
-  <script type="text/javascript" src="/js/modules/music-player.js"></script>
   <script type="text/javascript" src="/js/music.js"></script>
 {% endblock %}
 
diff --git a/app/views/templates/default.twig b/app/views/templates/default.twig
index 7f94ac9..7e774fc 100755
--- a/app/views/templates/default.twig
+++ b/app/views/templates/default.twig
@@ -1,28 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="utf-8" />
-	<!--Let browser know website is optimized for mobile-->
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-	<title>{% block title %}{% endblock %} | Halftone</title>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+  <meta charset="utf-8" />
+  <!--Let browser know website is optimized for mobile-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <title>{% block title %}{% endblock %} | Halftone</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.css">
   <link rel="stylesheet" href="/css/main.css"  media="screen,projection"/>
-	{% block stylesheets %}{% endblock %}
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  {% block stylesheets %}{% endblock %}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
-	<script type="text/javascript" src="/js/main.js"></script>
-	{% block javascripts %}{% endblock %}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.js"></script>
+  <script type="text/javascript" src="/js/main.js"></script>
+  {% block javascripts %}{% endblock %}
 </head>
 <body>
-	<div id="wrapper">
-		<div class="container">
-			{% include 'templates/partials/header.twig' %}
+  <div id="wrapper">
+    <div class="container">
+      {% include 'templates/partials/header.twig' %}
 
-			{% block content %}{% endblock %}
-		</div>
-	</div>
+      {% block content %}{% endblock %}
+    </div>
+  </div>
 
-	{% include 'templates/partials/footer.twig' %}
+  {% include 'templates/partials/footer.twig' %}
 </body>
 </html>
diff --git a/public/js/music.js b/public/js/music.js
index 2631b8d..c9d8809 100755
--- a/public/js/music.js
+++ b/public/js/music.js
@@ -1,7 +1,26 @@
 $(document).ready(function() {
-	$('#music-player').musicPlayer({
-		'audio': '#music-player',
-		'volume': .5,
-		'startTime': 0
-	})
-});
\ No newline at end of file
+  var player = new MediaElementPlayer('#music-player', {
+    // initial volume when the player starts
+    startVolume: 0.5,
+    // useful for <audio> player loops
+    loop: false,
+    // enables Flash and Silverlight to resize to content size
+    enableAutosize: true,
+    // the order of controls you want on the control bar (and other plugins below)
+    features: ['playpause','progress','current','duration','tracks','volume'],
+    // Hide controls when playing and mouse is not over the video
+    alwaysShowControls: false,
+    // force iPad's native controls
+    iPadUseNativeControls: false,
+    // force iPhone's native controls
+    iPhoneUseNativeControls: false,
+    // force Android's native controls
+    AndroidUseNativeControls: false,
+    // forces the hour marker (##:00:00)
+    alwaysShowHours: false,
+    // turns keyboard support on and off for this instance
+    enableKeyboard: true,
+    // when this player starts, it will pause other players
+    pauseOtherPlayers: true
+  });
+});
