Hoe te Sound Toevoegen aan je HTML5 Game

Geluidseffecten zijn al lange tijd een van de grootste zwakheden van het web als een HTML-gaming platform. Webbrowsers had zeer inconsistent en lastig audio-mogelijkheden. Gelukkig HTML5 lost het geluid kwestie (ten minste op een bepaald niveau).

De simpleGame bibliotheek maakt het zeer eenvoudig om nieuwe klanken te bouwen door het toevoegen van een object Sound. Hier is een zeer eenvoudig programma dat een geluidseffect speelt:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> sound.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
var scène;
var ribbit;

functie init () {
scène = new Scene ();
owMP3 = new Sound ("ow.mp3");
owOgg = new Sound ("ow.ogg");
scene.start ();
} // End init

functie update () {
if (keysDown [K_SPACE]) {
owMP3.play ();
owOgg.play ();
} // End if
} // End-update

</ Script>
</ Head>
<Body onload = "init ()">
<Div> NIET druk op de spatiebalk !! </ div>
</ Body>
</ Html>

Geluidseffecten zijn eenvoudig te beheren met het simpleGame bibliotheek:

  1. Maak uw geluidseffect.

    De beste formaten zijn mp3 en ogg. Zet uw audio-bestand in dezelfde map als het programma.

    Om browser compatibiliteit te maximaliseren, verder met stap 2.

  2. Maak een variabele om uw geluidseffect te houden.

    Net als elke wedstrijd actief, zult u een variabele met uw geluid. Definieer de variabele buiten elk functies.

  3. Bouw een Sound-object aan uw geluidseffect initialiseren.

    De simpleGame bibliotheek heeft een Sound-object. Maak een instantie van dit object aan uw geluid te bouwen. De naam van het bestand met uw geluidseffect: het object één parameter vereist. Normaal gesproken zult u dit doen in de init () functie van je spel.

  4. Speel het geluid met de methode play ().

    Zodra u een geluidseffect hebt gedefinieerd, kunt u het terug eenvoudig te spelen met het spel het geluid object () methode.

    Hoe te Sound Toevoegen aan je HTML5 Game

Geluidseffecten toe te voegen veel aan je spel. Vroeger was het heel moeilijk om te werken met geluidseffecten in webpagina's te zijn, maar HTML5 heeft een prachtige nieuwe <geluid> tag die uiteindelijk de browser toegang tot effecten zonder externe plug-ins geluid geeft. Het object Sound in de simpleGame bibliotheek is gebaseerd op de HTML5 <geluid> tag.

Groot als het geluid element, zijn er enkele problemen. Hoewel alle HTML5-compatibele browsers audiobestanden afspelen, hebben ze niet dezelfde bestandstypen afspelen. De mp3-formaat is zeer goed bekend, maar niet alle browsers ondersteunen het. Veel browsers liever de nieuwere (en open source) Ogg-formaat. Als dit niet verwarrend genoeg steun verandert van versie tot versie van dezelfde browser.

Mijn suggestie is om zowel MP3 en Ogg formaten te gebruiken en laat de browser spelen de methode die het kan. Dat zal lossen de meeste problemen.

Natuurlijk is het niet gemakkelijk om hetzelfde geluidseffect in beide formaten. Overweeg het gebruik van de gratis audio-editor, Audacity. Deze tool stelt u in staat om op te nemen en geluidseffecten in meerdere formaten te bewerken. Afhankelijk van de versie van Audacity je krijgt, moet u mogelijk ook de LAME plug-in. Met deze tools kunt u eenvoudig uw eigen geluidseffecten opnemen en opslaan in zowel Ogg en mp3-formaten.