使用Javascript加载音频对象

时间:2014-04-26 17:54:12

标签: javascript audio

我正在尝试制作一个需要音频文件的游戏,这些文件是从dropbox下载的,我想制作一个加载屏幕,在所有音频加载之前停止游戏?但是这不起作用,我正在调试loadMusic并且回调永远不会被调用

简而言之,加载Audio对象时会触发什么事件侦听器? (准备玩)如果没有,我该怎么办?

的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game</title>
<link rel="stylesheet" href="main.css"/>
<script type="text/javascript" src="Javascript/Canvas.js"></script>
<script type="text/javascript" src="Javascript/Menu.js"></script>
<script type="text/javascript" src="Javascript/Menus.js"></script>
<script type="text/javascript" src="Javascript/Music.js"></script>
<script type="text/javascript" src="Javascript/SFX.js"></script>
<script type="text/javascript" src="Javascript/Loading.js"></script>
<script type="text/javascript" src="Javascript/Wait.js"></script>
<script>
window.addEventListener('load',onLoad,false);
function onLoad(){

    //GAME_MENU.hide();
    SFX.CLICK.addEventListener('canplaythrough',function test(){

警报( '试验');} );

}
function doneLoading(){
    //done loading resources
    startMenu();
    GAME_MENU.show();
    GameBg = new Background('backgroundCanvas');
    GameBg.setImage(Backgrounds.MAIN_MENU);
    MUSIC_PLAYER.playTrack(TRACKS.MAIN_MENU);
}

</script>
</head>

<body style="width:100%;height:100%;margin:0px">
<div id="hideImages"></div>
<div id="gameScreen">

    <canvas id="backgroundCanvas" class="canvas"></canvas>
    <canvas id="playerCanvas" class="canvas"></canvas>
    <canvas id="attackCanvas" class="canvas"></canvas>
    <canvas id="outerCanvas" class="canvas"></canvas>

    <div id="menu" style="visibility:hidden;" class="canvas">
        <div id="menuTitle" class="menuButton" style="margin-top:200px;font-size:50px;color:black; background-color:gray;height:50px;width:600px;cursor:default;">

        </div>
        <ul id="items" style="margin:0px auto;margin-left:-40px;margin-top:10px;">
        </ul>
    </div>

    <footer id="footer"></footer>
</div>
</body>
</html>

Loading.js

MUSIC_ID = 0;
SFX_ID = 1;
loaded = 0;
function loadResources(){
    loadMusic();
}
function loadResources2(){
    loadSFX();
}
function loadMusic(){
    console.log('Loading Music');
    for(var x=0;x<TRACKS.list.length;x++){
        var track = TRACKS.list[x];
        track.preload = true;
        track.addEventListener('loadeddata',function(){loaded++;},false);
    }
    sleepCheck(MUSIC_ID, loadResources2);
}
function loadedMusic(){
    if(loaded==TRACKS.list.length)
        sleepCheck(MUSIC_ID);
        loaded = 0;
}
function loadSFX(){
    console.log('Loading SFX');
    for(var x=0;x<SFX.list.length;x++){
        var track = SFX.list[x];
        track.preload = true;
        track.addEventListener('loadeddata',function(){loaded++;},false);
    }
    sleepCheck(SFX_ID, doneLoading);
}
function loadedSFX(){
    if(loaded==SFX.list.length)
        sleepCheck(SFX_ID);
        loaded = 0;
}

Wait.js

Sleeps = new Object();
Sleeps.sleepChecks = [];
Sleeps.addSleepCheck =
    function(id,callback){
        this.sleepChecks[id] = callback;
    };
function sleep(millis, callback) {
    setTimeout(function()
            { callback(); }
    , millis);
}
function sleepCheck(id,callback){
    if(Sleeps.sleepChecks[id]!=null){
        Sleeps.sleepChecks[id];
    }else{
        Sleeps.addSleepCheck(id,callback);
    }
}

Music.js

var path = 'Resources/Audio/Music/';
MUSIC_PLAYER = new Object();
MUSIC_PLAYER.volume = 0.5;
MUSIC_PLAYER.currentTrack = null;
MUSIC_PLAYER.playTrack =
function playTrack(track){
    if(typeof track === 'number' && track%1 == 0)
        track = this.list[track];
    if(this.currentTrack==track)
        return;
    this.stop();
    this.currentTrack = track;
    this.currentTrack.loop = true;
    this.restart();
    this.start();
    return true;
};
MUSIC_PLAYER.start =
    function startMusic(){
        if(this.currentTrack==null)
            return false;
        if(this.currentTrack.ended||this.currentTrack.paused){
            this.currentTrack.play();
            this.currentTrack.volume = this.volume;
            return true;
        }
    };
MUSIC_PLAYER.stop =
    function stopMusic(){
        if(this.currentTrack == null)
            return false;
        if(!(this.currentTrack.ended||this.currentTrack.paused))
            this.currentTrack.pause();
        return true;
    };
MUSIC_PLAYER.setVolume =
    function setVolume(vol){
        this.volume = vol/10;
        if(this.currentTrack==null)
            return false;
        this.currentTrack.volume = this.volume;
    };
MUSIC_PLAYER.restart =
    function restartMusic(){
        this.currentTrack.currentTime = 0;
    };
TRACKS = new Object();
TRACKS.list = [];
TRACKS.MAIN_MENU = TRACKS.list[0] = new Audio('https://dl.dropboxusercontent.com/s/klauhgst6ucwrdh/Title.mp3?dl=1&token_hash=AAHb6Cc9de8-PUKOATpgciLJmoQIM1-o6thalq3GMSdf-w');
TRACKS.CREDITS_MENU = TRACKS.list[1] = new Audio('https://dl.dropboxusercontent.com/s/6juu8a0797gamlg/Credits.mp3?dl=1&token_hash=AAH666_2nLK-WYNbh4z7Gj4HrjqfIIZoZwNodW6nTZyVfA');

SFX.js

var path = 'Resources/Audio/SFX/';
SFX = new Object();
SFX.volume = 0.5;
SFX.list = [];
SFX.CLICK = SFX.list[0] = new Audio('https://dl.dropboxusercontent.com/s/mb4uzm20car4ynx/Click.mp3?dl=1&token_hash=AAGIkSpcaG-WR2nz9uBi94TzmuWzOIhLsDipLtjFY9PzSA');
function playSound(sound){
    if(typeof sound === 'number' && sound%1 == 0)
        sound = SFX.list[sound];
    try{
        sound.volume = SFX.volume/10;
        sound.play();
        return true;
    }catch(e){}
    return false;
}

0 个答案:

没有答案