html JS.AudioVideo.CombinedPlayer.Images.Sound.Music

Posted 2021-05-10

#myCanvas {
  border:1px solid black;
  
}

window.onload = init;


var assetsToLoadURLs = {
    backgroundImage: { url: 'https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/images/background.png' }, // http://www.clipartlord.com/category/weather-clip-art/winter-clip-art/
    logo1: { url: "https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/images/SkywardWithoutBalls.png" },
    logo2: { url: "https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/images/BoundsWithoutBalls.png" },
    bell: { url: "https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/images/bells.png" },
    spriteSheetBunny: { url: 'https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/images/bunnySpriteSheet.png' },
    plop: { url: 'https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/sounds/plop.mp3', buffer: false, loop: false, volume: 1.0 },
    humbug: { url: 'https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/sounds/humbug.mp3', buffer: true, loop: true, volume: 1.0 },
    concertino: { url: 'https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/sounds/christmas_concertino.mp3', buffer: true, loop: true, volume: 1.0 },
    xmas: { url: 'https://mainline.i3s.unice.fr/mooc/SkywardBound/assets/sounds/xmas.mp3', buffer: true, loop: true, volume: 0.6 }
};

var loadedAssets;

function init() {
    // this call will load all assets
  document.body.innerHTML += "<p>Loading assets...</p>";
    loadAssets(startGame);
}

function startGame(assetsReadyToBeUsed) {
  document.body.innerHTML += "<p>IMAGES, SOUNDS, MUSICS READY TO BE USED!</p>";
  // We're ready to use all sounds, images, musics etc
  loadedAssets = assetsReadyToBeUsed;
  
  // ex: draw the images in a canvas
  drawImages();
  
  // play one of the background music
  // UNCOMMENT THIS LINE!
  playHumbug();
  
  // play plop every second
  // UNCOMMENT THIS LINE!
  setInterval(playPlop, 1000);
}

function playHumbug() {
  loadedAssets.humbug.play();
}

function playPlop() {
    loadedAssets.plop.play();
}

function drawImages() {
  var canvas = document.querySelector('#myCanvas');
  var ctx = canvas.getContext('2d');
  
  // background image drawImage can have different syntaxes : drawImage(img, x, y); or
  // drawImage(x, y, width, height), for other syntaxes see HTML5 fundamentals course
  ctx.drawImage(loadedAssets.backgroundImage, 0, 0, canvas.width, canvas.height);
  ctx.drawImage(loadedAssets.bell, 20, 20);
  
  ctx.drawImage(loadedAssets.spriteSheetBunny, 190, 0);
  
}
//==========================

function loadAssets(callback) {
    // here we should load the sounds, the sprite sheets etc.
    // then at the end call the callback function           
    loadAssetsUsingHowlerAndNoXhr(assetsToLoadURLs, callback);
}

// You do not have to understand in details the next parts of the code...
// just use the above function

/* ############################
    BUFFER LOADER for loading multiple files asyncrhonously. The callback functions is called when all
    files have been loaded and decoded 
 ############################## */
function isImage(url) {
    return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

function isAudio(url) {
    return (url.match(/\.(mp3|ogg|wav)$/) != null);
}

function loadAssetsUsingHowlerAndNoXhr(assetsToBeLoaded, callback) {
    var assetsLoaded = {};
    var loadedAssets = 0;
    var numberOfAssetsToLoad = 0;

    // define ifLoad function
    var ifLoad = function () {
        if (++loadedAssets >= numberOfAssetsToLoad) {
            callback(assetsLoaded);
        }
        console.log("Loaded asset " + loadedAssets);
    };

    // get num of assets to load
    for (var name in assetsToBeLoaded) {
        numberOfAssetsToLoad++;
    }

    console.log("Nb assets to load: " + numberOfAssetsToLoad);

    for (name in assetsToBeLoaded) {
        var url = assetsToBeLoaded[name].url;
        console.log("Loading " + url);
        if (isImage(url)) {
            assetsLoaded[name] = new Image();

            assetsLoaded[name].onload = ifLoad;
            // will start async loading. 
            assetsLoaded[name].src = url;
        } else {
            // We assume the asset is an audio file
            console.log("loading " + name + " buffer : " + assetsToBeLoaded[name].loop);
            assetsLoaded[name] = new Howl({
                urls: [url],
                buffer: assetsToBeLoaded[name].buffer,
                loop: assetsToBeLoaded[name].loop,
                autoplay: false,
                volume: assetsToBeLoaded[name].volume,
                onload: function () {
                    if (++loadedAssets >= numberOfAssetsToLoad) {
                        callback(assetsLoaded);
                    }
                    console.log("Loaded asset " + loadedAssets);
                }
            }); // End of howler.js callback
        } // if

    } // for
} // function

JS.AudioVideo.CombinedPlayer.Images.Sound.Music
-----------------------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/oPrxEd) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/oPrxEd/license).

<!DOCTYPE html>
<html lang="en">
<head>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.28/howler.min.js"></script>
  <title>Multiple sound and image loader</title>
  <meta charset="utf-8">
  </head>
  <body>
    <canvas id="myCanvas" width=400 height=400></canvas>
  </body>
</html>