geluid toevoegen aan javascript game

Status
Niet open voor verdere reacties.

pouletten

Gebruiker
Lid geworden
13 apr 2010
Berichten
70
Hoi allemaal,

Ik heb via een kinderboek een game geschreven om zo een aantal basisvaardigheden in Javascript te leren.
Nu zou ik graag een achtergrond muziekje willen plaatsten wanneer de game start. Ik heb e.e.a. geprobeerd wat ik op google heb gevonden, maar ik krijg het nog niet werkende.
Stel dat het bestand :"test.mp3" heet. Hoe moet ik dit dan toevoegen aan de code?
De code zit in de bijlage.
Alvast bedankt.

Pouletten
 

Bijlagen

  • program.txt
    9,5 KB · Weergaven: 37
Sorry voor de late reactie, maar ik wilde even de tijd nemen.
Ik heb dus verschillende dingen geprobeerd, waaronder de oplossing in de link, maar op een een of andere manier krijg ik het niet werkende.

ik heb ook, net zoals ik met de afbeeldingen heb gedaan het geluidsbestand toegevoegd met "var testgeluid = new sound testgeluid.src = test.mp3
De afbeeldingen zie ik terug in de console, maar het mp3 bestand niet.

Ik heb ook geprobeerd op het als function te doen, maar wederom zonder resultaat. (https://www.w3schools.com/graphics/game_sound.asp)

Op internet ben ik nog wat oplossingen tegen gekomen en die heb ik uitgeprobeerd, maar dat is al weer even een tijdje geleden. En ik ben nog echt een beginner met JavaScript en loop hier echt op vast.
 
Laatst bewerkt:
Wat heb je al geprobeerd? Laat anders even de code zien, want als je steeds dezelfde fout maakt, dan schiet het niet echt op.
Je kan het eventueel ook in een JSfiddle delen.
 
Maak voor elk geluid een mp3 bestand en zet elke mp3 in een eigen <audio> speler. Alle spelers maak je hidden. Op het moment dat je een geluid nodig hebt start je de betreffende <audio> speler. De volgende code heb ik niet getest maar het gaat om het idee. Je vindt alles op deze pagina
Code:
<audio id="speler_1" preload="auto" src="https://www.example.nl/mp3/boem.mp3"></audio>

<script>
var geluid_boem = document.getElementById("speler_1");
// stel dat je een Sprite hebt die omvalt
if (SpriteDown == true) {
  geluid_boem.start();
}
</script>

Laat even weten hoe ver je komt, leuk project.
 
Ik heb een aantal dingen geprobeerd waaronder de oplossing in de bijlage.
Hier heb ik een aantal variaties op gedaan. Het spel werkte dan wel, maar er kwam geen geluid en ik zag het mp3 bestand ook niet terug in de console.
Ik zal de oplossing van Bron proberen en dan laat ik weten wat eruit komt.
 

Bijlagen

  • program.txt
    9,1 KB · Weergaven: 28
Ik heb het!!!! dank je wel
ik snap nog niet helemaal wat dit doet, maar het werkt :)
 

Bijlagen

  • program.txt
    9,1 KB · Weergaven: 34
new sound(...) is niet officieel gedocumenteerd. Ik vermoed dat het bij toeval werkt in de browser die je nu gebruikt. In sommige andere browsers is het niet aanwezig en in de toekomst zal het verdwijnen. Daarentegen is new Audio(...) wel gedocumenteerd maar die wijkt gek genoeg op sommige punten af van de werking van het <audio> element.

Nog een paar mogelijkheden
Code:
<audio id="boem" style="display:none" preload="auto">
  <source src="boem.mp3" type="audio/mpeg">
</audio> 
<script>
// 1. audio hierboven
var boem = document.getElementById("boem");
boem.play();
</script>

// 2. create audio object
boem = document.createElement("audio");
boem.src = "boem.mp3";
boem.setAttribute("preload", "auto");
boem.setAttribute("controls", "none");
boem.style.display = "none";
document.body.appendChild(boem);
boem.play();

// 3. new Audio() object werkt in de praktijk blijkbaar iets
// anders dan 1. en 2. Geen idee waarom...
var boem = new Audio("boem.mp3");
boem.play();

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.2/howler.min.js"></script>
<script>
// 4. script 'howler' is handig voor sprites, voorbeelden https://github.com/goldfire/howler.js
var boem = new Howl({
  src: ["boem.mp3"]
});
boem.play();
</script>
 
Laatst bewerkt:
Ik denk dat per ongeluk het oude bestand als bijlage heb gedaan.
Hier is de oplossing die ik heb gebruikt. Nu wil ik die balk verbergen, maar ik weet niet zo goed hoe dat moet. Misschien zijn de andere oplossingen daarvoor handiger.
 

Bijlagen

  • program.txt
    10 KB · Weergaven: 22
Kijk eens bij #8, de eerste oplossing, die een beetje aanpassen
Code:
<audio id="audiospeler1" style="display:none" preload="auto">
   <source src="kungfu.mp3" type="audio/mpeg">
</audio>

<script>
var geluidKungfu = document.getElementById("audiospeler1");

// voorbeeld in jouw code
function onKeyDown(event) {
   if (event.keyCode === SPACE_KEYCODE) {
      spaceKeyIsPressed = true;
      geluidKungfu.play();
   }
}
</script>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan