Merge pull request #8 from benjaminluck/feature/soundcloud

Working sound playback via the SoundCloud Widget API. Very hack and s…

index.php

@@ -13,6 +13,8 @@
       <meta property="og:image" content="<?= $meta['image']; ?>">
       <meta property="og:url" content="<?= $meta['url']; ?>">
       <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
+      <script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
+      <script src="https://w.soundcloud.com/player/api.js"></script>
       <script src="js/three.min.js"></script>
       <script src="js/controls/PointerLockControls.js"></script>
       <script src="js/loaders/collada/Animation.js"></script>
@@ -44,6 +46,10 @@
               ?>
           </ul>
         </div>
+        <iframe width="100%" height="450" style="display:none;" scrolling="no" frameborder="no" id="soundcloud-player"
+                src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/304658516&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false">
+        </iframe>
+        </div>
         <div class="float-left m-6 hidden-xs">
           <div id="mute-btn" class="mute-btn mute-btn-unmuted"></div>
           <div id="mute-btn-muted" class="mute-btn mute-btn-muted hidden"></div>

js/audioplayer.js

@@ -1,3 +1,35 @@
+SC.initialize({
+  client_id: 'B4dzsr4tDHKQqDMMMREfUnwrwJzvGaD2'
+});
+
+var id = 293
+
+var scPlayer;
+SC.stream('/tracks/' + id).then(function(player){
+  console.log(player);
+
+  // making sure that 'http' is the first item in .protocols seems to fix issues with the flash obj being blocked
+  player.options.protocols = [
+    "http",
+    "rtmp"
+  ];
+
+//  player.play()
+  scPlayer = player;
+});
+
+function playTrack(trackNumber){
+  alert('playTrack');
+  if(trackNumber){
+    window.SC.Widget('soundcloud-player').skip(trackNumber);
+  }
+  window.SC.Widget('soundcloud-player').play();
+}
+
+//sound2 = new newSound(313537641);
+//newSound(313331549);
+
+
 songs = [{"name": "money", "src":"assets/snd/one.mp3"},
          {"name": "arab", "src":"assets/snd/two.mp3"},
          {"name": "sphlash", "src":"assets/snd/three.mp3"},
@@ -28,7 +60,18 @@ window['songHandler'] = {
   songVars : {},
   playSong : function(songName){
     songName = songName.replace('invis_', '');
-    alert('Play: ' + songName); 
+    var songIndex;
+    window['songs'].forEach(function(item, key){
+        if(item.name == songName){
+          songIndex = key;
+        }
+    });
+    window.playTrack(songIndex);
+    return true;
+
+    //
+    //
+    alert('Play: ' + songName);
     for(key in this.songVars){
       window[this.songVars[key]].stop();
       if(key == songName){

page.js

@@ -211,8 +211,12 @@ function onTouchStart(event){
   console.log(event);
   console.log(raycaster);
 
-  unlockIOSAudioPlayback();
 
+  if(event.targetTouches){
+
+	}else{
+		return false;
+	}
   mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;
   mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;
 
@@ -223,7 +227,7 @@ function onTouchStart(event){
   if ( intersects.length > 0 ) {
   //  alert(mesh.name);
 
-    var mesh  = intersects[0].object.parent;
+    var mesh  = intersects[0].object.parent; 
     if(mesh.name == 'Cylinder'){
       moveToDownloadPage();
     }