Permalink
Browse files

Playing with rythm.js - music page

  • Loading branch information...
Damián Cravacuore
Damián Cravacuore committed Sep 6, 2017
1 parent f015004 commit fb05c94ccab030ac6cd0de6d6bd825e9df1f5062
Showing with 47 additions and 0 deletions.
  1. BIN assets/you-are-a-pirate.mp3
  2. +20 −0 js/music.js
  3. +27 −0 music.html
View
Binary file not shown.
View
@@ -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');
}
})
View
@@ -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>

0 comments on commit fb05c94

Please sign in to comment.