HalfTone/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Started working on the music player

Browse Source
This commit is contained in:
gballan1 2016-11-28 11:17:28 -05:00
parent 89e51e2da7
commit 04b7376cbd
4 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/views/music1.twig
View File

@ -1,7 +1,6 @@
{% extends 'templates/default.twig' %} {% extends 'templates/default.twig' %}
{% block javascripts %} {% block javascripts %}
<script type="text/javascript" src="/js/modules/music-player.js"></script>
<script type="text/javascript" src="/js/music.js"></script> <script type="text/javascript" src="/js/music.js"></script>
{% endblock %} {% endblock %}

1
app/views/music2.twig
View File

@ -1,7 +1,6 @@
{% extends 'templates/default.twig' %} {% extends 'templates/default.twig' %}
{% block javascripts %} {% block javascripts %}
<script type="text/javascript" src="/js/modules/music-player.js"></script>
<script type="text/javascript" src="/js/music.js"></script> <script type="text/javascript" src="/js/music.js"></script>
{% endblock %} {% endblock %}

34
app/views/templates/default.twig
View File

@ -1,28 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!--Let browser know website is optimized for mobile--> <!--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"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>{% block title %}{% endblock %} | Halftone</title> <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/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/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"/> <link rel="stylesheet" href="/css/main.css" media="screen,projection"/>
{% block stylesheets %}{% endblock %} {% 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/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 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> <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.js"></script>
{% block javascripts %}{% endblock %} <script type="text/javascript" src="/js/main.js"></script>
{% block javascripts %}{% endblock %}
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<div class="container"> <div class="container">
{% include 'templates/partials/header.twig' %} {% include 'templates/partials/header.twig' %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
</div> </div>
{% include 'templates/partials/footer.twig' %} {% include 'templates/partials/footer.twig' %}
</body> </body>
</html> </html>

31
public/js/music.js
View File

@ -1,7 +1,26 @@
$(document).ready(function() { $(document).ready(function() {
$('#music-player').musicPlayer({ var player = new MediaElementPlayer('#music-player', {
'audio': '#music-player', // initial volume when the player starts
'volume': .5, startVolume: 0.5,
'startTime': 0 // 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
});
});