Tworzę grę z HTML5 i Javascript.
Jak mogę odtwarzać dźwięk z gry za pomocą Javascript?
javascript
html
html5-audio
Ryan S.
źródło
źródło
<audio>
. Ten element będzie miał odpowiednie haki JS do „odtwarzania”, „pauzy” itp.Odpowiedzi:
Jeśli nie chcesz zadzierać z elementami HTML:
Pokaż fragment kodu
Korzysta z
HTMLAudioElement
interfejsu, który odtwarza dźwięk w taki sam sposób jak<audio>
element .Jeśli potrzebujesz więcej funkcji, skorzystałem z biblioteki howler.js i uznałem ją za prostą i przydatną.
Pokaż fragment kodu
źródło
<audio>
. Wikipedia ma tabelę kompatybilności formatu audio .new Audio()
może odtwarzać pliki WAV we wszystkich przeglądarkach oprócz Internet Explorera.To proste, wystarczy pobrać
audio
element i wywołaćplay()
metodę:Sprawdź ten przykład: http://www.storiesinflight.com/html5/audio.html
Ta strona odkrywa niektóre inne fajne rzeczy, które możesz zrobić, takie jak
load()
,pause()
i kilka innych właściwościaudio
elementu.źródło
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 zapewnia łatwy w użyciu interfejs API, który umożliwia odtwarzanie dźwięku w dowolnej nowoczesnej przeglądarce, w tym IE 6+. Jeśli przeglądarka nie obsługuje HTML5, otrzymuje pomoc od Flasha. Jeśli chcesz ściśle korzystać z HTML5 i bez flashowania, możesz to ustawić,
preferFlash=false
Obsługuje w 100% dźwięk bez Flasha na iPadzie, iPhonie (iOS4) i innych urządzeniach z obsługą HTML5 + przeglądarkach
Użycie jest tak proste, jak:
Oto jego demo w akcji: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
źródło
To dość stare pytanie, ale chcę dodać przydatne informacje. Autor tematu wspomniał, że jest
"making a game"
. Tak więc dla każdego, kto potrzebuje dźwięku do tworzenia gier, jest lepszy wybór niż tylko<audio>
tag lub anHTMLAudioElement
. Myślę, że powinieneś rozważyć użycie Web Audio API :źródło
Łatwo dzięki Jquery
// ustaw tagi audio bez wstępnego ładowania
// dodaj jquery do załadowania
// napisz metody grania i zatrzymywania
// zdecyduj, jak kontrolować dźwięk
EDYTOWAĆ
Aby odpowiedzieć na pytanie @ stomy, oto jak możesz użyć tego podejścia do odtwarzania listy odtwarzania :
Ustaw swoje piosenki w obiekcie:
Użyj funkcji wyzwalania i odtwarzania jak poprzednio:
Dynamicznie ładuj pierwszą piosenkę:
Zresetuj źródło dźwięku do następnego utworu na liście odtwarzania, gdy zakończy się bieżący utwór:
Zobacz tutaj przykład tego kodu w akcji.
źródło
ended
wydarzenie, które ma być emitowane i rozpocząć następny plik audio na liście (prawdopodobnie śledzisz albo w DOM, JS itp.) ). developer.mozilla.org/en-US/docs/Web/Events/endedDodaj ukryty dźwięk i odtwarzaj go.
źródło
Jeśli pojawia się następujący błąd:
Oznacza to, że użytkownik musi najpierw wejść w interakcję ze stroną internetową (jak mówi komunikat o błędzie). W takim przypadku musisz użyć
click
lub tylko innego detektora zdarzeń, aby użytkownik mógł wchodzić w interakcje z witryną.Jeśli chcesz automatycznie załadować dźwięk i nie chcesz, aby użytkownik najpierw wchodził w interakcję z dokumentem, możesz użyć
setTimeout
.Dźwięk rozpocznie się po 0,5 sekundy.
źródło
źródło
źródło
Całkiem proste rozwiązanie, jeśli masz tag HTML taki jak poniżej:
Aby go odtworzyć, użyj JavaScript:
źródło
Miałem pewne problemy związane ze zwrotami obiektów obietnicy audio i pewne problemy związane z interakcją użytkownika z dźwiękami, które w końcu używam tego małego obiektu,
Polecam zaimplementować dźwięki odtwarzania najbliższe zdarzeniu interakcji, z którego korzysta użytkownik.
I zaimplementuj go w następujący sposób:
źródło
Użyłem tej metody do odtworzenia dźwięku ...
źródło
W związku z wymogami bezpieczeństwa dotyczącymi interakcji audio ze stroną internetową, aby dźwięk był dozwolony, robię to w oparciu o czytanie wielu artykułów, w tym na tej stronie
Ponieważ wszystkie pliki audio zostały „odtworzone” na tym samym OnClick, możesz teraz odtwarzać je w dowolnym momencie w grze bez ograniczeń
Zauważ, że dla najlepszej kompatybilności nie używaj plików wav, MS ich nie obsługuje
Użyj mp3 i ogg, który obejmuje wszystkie urządzenia
Przykład:
w razie potrzeby powtarzaj wszystkie dźwięki w grze
Następnie:
powtarzaj w razie potrzeby, z wyjątkiem tego, że nie wstrzymuj dźwięku, który chcesz usłyszeć na początku gry
źródło
jeśli chcesz odtwarzać dźwięk przy każdym otwarciu strony, zrób tak.
i wywoływaj to playMusic (), ilekroć potrzebujesz w kodzie gry.
źródło
Możesz użyć interfejsu API Web Audio do odtwarzania dźwięków. Istnieje całkiem sporo bibliotek audio, takich jak howler.js, soundjs itp. Jeśli nie martwisz się o stare przeglądarki, możesz także sprawdzić na http://musquitojs.com/ . Zapewnia prosty interfejs API do tworzenia i odtwarzania dźwięków.
Na przykład, aby odtworzyć dźwięk, wystarczy.
Biblioteka obsługuje również duszki audio.
źródło
To jest JS, nad którym pracowałem nad małym projektem AI. mam nadzieję, że to może ci pomóc.
źródło
Po prostu użyj tego:
Lub, aby uprościć:
Próba:
źródło
Miałem pewne problemy z odtwarzaniem dźwięku, zwłaszcza, że Chrome zaktualizował, że użytkownik musi najpierw wejść w interakcję z dokumentem.
Jednak w prawie wszystkich rozwiązaniach, które znalazłem, kod JS musi aktywnie ustawiać detektory (np. Kliknięcia przycisków) w celu odbierania zdarzeń użytkownika w celu odtworzenia dźwięku.
W moim przypadku chciałem, aby moja gra grała w BGM, gdy tylko gracz wejdzie w interakcję, więc postanowiłem, że jestem prostym słuchaczem, który sprawdza, czy strona internetowa jest obsługiwana, czy nie.
źródło
Oto rozwiązanie na rok 2020, kiedy pojawia się błąd:
Nie bądź zręczny i myślę, że to stara szkoła
oclick
, po prostu przeniosę ją na dół do mojego jQuery lub zewnętrznego pliku JavaScript. Nie. To musi byćonclick
.źródło