Playing with rythm.js - music page

cravacuore · Sep 6, 2017 · fb05c94 · fb05c94
1 parent f015004
commit fb05c94
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/assets/you-are-a-pirate.mp3 b/assets/you-are-a-pirate.mp3
diff --git a/js/music.js b/js/music.js
@@ -0,0 +1,20 @@
+var rythm = new Rythm();
+
+rythm.addRythm('rythm-color', 'color', 0, 10, {
+              from: [255,255,0],
+              to:[0,0,255]
+            });
+
+document.getElementById('play-button').addEventListener('click', function(){
+  var icon = document.getElementById('icon');
+  if(rythm.stopped === false){
+    rythm.stop();
+    icon.classList.toggle('fa-pause');
+    icon.classList.toggle('fa-play');
+  } else {
+    rythm.setMusic("assets/you-are-a-pirate.mp3");
+    rythm.start();
+    icon.classList.toggle('fa-play');
+    icon.classList.toggle('fa-pause');
+  }
+})
diff --git a/music.html b/music.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Cravacuore Photos</title>
+    <meta name="description" content="Damian Cravacuore's personal photos collection">
+    <meta name="author" content="Damián Cravacuore">
+
+    <!-- Responsive Stuff -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
+
+    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
+  </head>
+
+  <body class="body rythm-color">
+    <div class="particles rythm-bass" id="particles-js"></div>
+    <div id="play-button"
+      style="position: absolute; left: 50%; top: 50%">
+      <i id="icon" class="fa fa-play fa-5x"></i>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.1.0/rythm.min.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/music.js"></script>
+  </body>
+</html>