backgound music

TODO.md

@@ -1,9 +1,12 @@
-- several correct answer
+- finish game image
+- desktop (landscape) orientation
+- background music
 - change quest animation
 - button hover animation
 - make docs/
 
 ## done
+- several correct answer [498ab55]
 - loading all quest images with loading [b8aa4b6]
 - splash (loading) screen [b8aa4b6]
 - add quest progress [aac38ec]

app/.gitignore

@@ -1,2 +1,3 @@
 engine.js
 assets/images/*.jpg
+assets/sfx/*.mp3

app/config.json

@@ -2,5 +2,6 @@
   "gameName": "quizEngine",
   "gameVersion": [0, 0, 1],
   "debug": true,
-  "loaderWidth": 200
+  "loaderWidth": 200,
+  "music": "music.mp3"
 }

js/index.js

@@ -5,6 +5,7 @@ import gameData from '../app/gameData.json'; // game data
 
 import { getMousePos, isInside } from './buttons.js';
 import { clearContext, placeImage, getCenterH, getCenterV } from './draw.js';
+import { playMusic } from './music.js';
 import { imagePreloader, checkAnswer, shuffle, restartGame } from './game.js';
 
 // Engine variables -------------------------------------
@@ -18,6 +19,7 @@ let game = {}; // main game variable
 let areas = { game: {}, finish: {} };
 let images = {};
 let buttons = {};
+let music = {};
 
 // Init -------------------------------------------------
 window.onload = function() {
@@ -47,6 +49,9 @@ window.onload = function() {
 
 	imagePreloader(questImages, function() { game.loadedState = true; });
 
+	music.music = new AudioContext() || new webkitAudioContext();
+	playMusic(config, music.music);
+
 	game.loadedState = false;
 	game.finish = false;
 	game.currentQuest = 0;

js/music.js

@@ -0,0 +1,19 @@
+export function playMusic(config, music) {
+	let request = new XMLHttpRequest();
+
+	request.open("GET", `assets/sfx/${config.music}`, true);
+    request.responseType = "arraybuffer";
+    request.onload = function(){
+        music.decodeAudioData(request.response, onDecoded);
+    }
+    
+    function onDecoded(buffer) {
+        var bufferSource = music.createBufferSource();
+        bufferSource.buffer = buffer;
+        bufferSource.connect(music.destination);
+        bufferSource.loop = true;
+        bufferSource.start();
+    }
+    
+    request.send();
+}