|
|
@@ -7,6 +7,18 @@
|
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
+ <audio id="song" preload="auto" style="display: none">
|
|
|
+ <source src="sounds/358232_j_s_song.ogg" type="audio/ogg">
|
|
|
+ <source src="sounds/358232_j_s_song.mp3" type="audio/mpeg">
|
|
|
+ </audio>
|
|
|
+ <audio id="skullbeatz" preload="auto" style="display: none">
|
|
|
+ <source src="sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg" type="audio/ogg">
|
|
|
+ <source src="sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3" type="audio/mpeg">
|
|
|
+ </audio>
|
|
|
+ <audio id="utopia" loop preload="auto" style="display: none">
|
|
|
+ <source src="sounds/Project_Utopia.ogg" type="audio/ogg">
|
|
|
+ <source src="sounds/Project_Utopia.mp3" type="audio/mpeg">
|
|
|
+ </audio>
|
|
|
<div id="overlay">
|
|
|
<button id="startButton">Play</button>
|
|
|
</div>
|
|
|
@@ -63,20 +75,15 @@
|
|
|
|
|
|
// sound spheres
|
|
|
|
|
|
- const audioLoader = new THREE.AudioLoader();
|
|
|
-
|
|
|
const mesh1 = new THREE.Mesh( sphere, material1 );
|
|
|
mesh1.position.set( - 250, 30, 0 );
|
|
|
scene.add( mesh1 );
|
|
|
|
|
|
const sound1 = new THREE.PositionalAudio( listener );
|
|
|
- audioLoader.load( 'sounds/358232_j_s_song.ogg', function ( buffer ) {
|
|
|
-
|
|
|
- sound1.setBuffer( buffer );
|
|
|
- sound1.setRefDistance( 20 );
|
|
|
- sound1.play();
|
|
|
-
|
|
|
- } );
|
|
|
+ const songElement = document.getElementById( 'song' );
|
|
|
+ sound1.setMediaElementSource( songElement );
|
|
|
+ sound1.setRefDistance( 20 );
|
|
|
+ songElement.play();
|
|
|
mesh1.add( sound1 );
|
|
|
|
|
|
//
|
|
|
@@ -86,13 +93,10 @@
|
|
|
scene.add( mesh2 );
|
|
|
|
|
|
const sound2 = new THREE.PositionalAudio( listener );
|
|
|
- audioLoader.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function ( buffer ) {
|
|
|
-
|
|
|
- sound2.setBuffer( buffer );
|
|
|
- sound2.setRefDistance( 20 );
|
|
|
- sound2.play();
|
|
|
-
|
|
|
- } );
|
|
|
+ const skullbeatzElement = document.getElementById( 'skullbeatz' );
|
|
|
+ sound2.setMediaElementSource( skullbeatzElement );
|
|
|
+ sound2.setRefDistance( 20 );
|
|
|
+ skullbeatzElement.play();
|
|
|
mesh2.add( sound2 );
|
|
|
|
|
|
//
|
|
|
@@ -120,14 +124,10 @@
|
|
|
// global ambient audio
|
|
|
|
|
|
const sound4 = new THREE.Audio( listener );
|
|
|
- audioLoader.load( 'sounds/Project_Utopia.ogg', function ( buffer ) {
|
|
|
-
|
|
|
- sound4.setBuffer( buffer );
|
|
|
- sound4.setLoop( true );
|
|
|
- sound4.setVolume( 0.5 );
|
|
|
- sound4.play();
|
|
|
-
|
|
|
- } );
|
|
|
+ const utopiaElement = document.getElementById( 'utopia' );
|
|
|
+ sound4.setMediaElementSource( utopiaElement );
|
|
|
+ sound4.setVolume( 0.5 );
|
|
|
+ utopiaElement.play();
|
|
|
|
|
|
// ground
|
|
|
|
Brian Peiris