Javascript/jQuery Audio problem z odtworzeniem plików

0

Cześć, mam problem z <audio> w HTML5.
Program który tworze jest podobny do tego na dole. Po wczytaniu mogę odtworzyć pierwsze źródło $('#myaudio')[0].play(); i gra muzyczka, jednak schody pojawiają się przy drugim source $('#myaudio')[1].play();.

W przeglądarce wyskakuje taki błąd?

Uncaught TypeError: Cannot read property 'play' of undefined
at HTMLDivElement.<anonymous> (costam.html:26)
at HTMLDivElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLDivElement.y.handle (jquery-3.3.1.min.js:2)

Ktoś orientuje się gdzie jest błąd?

<!DOCTYPE html> <html> <head> </head> <body> <audio preload="auto" id="myaudio" clss="my"> <source src="Codzienność.mp3" type="audio/mp3"> <source src="Pociąg.mp3" type="audio/mp3"> Your browser does not support this audio format. </audio>
BOTAN
<script src="JQuery/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { $('#botan').click(function () { //alert("foo"); $('#myaudio')[0].play(); }); }); </script> </body> </html>
0

Po pierwsze id powinno być unikalne. O ile można pobrać wiele elementów z tym samym id (chociazby za pomocą document.querySelectorAll), to twórcy JQuery widocznie wybrali opcję z szybszym działaniem metody (wyszukiwanie tylko pierszego elementu), zakładając, że użytkownik stosuje dobre praktyki i nie ma wielokrotnych wystapień identyfikatorów. Proponuję zamiast atrybutu id użyć atrybutu class bądź data-, które nie muszą mieć unikalnych wartości.

Btw, jakbyś użył debuggera lub chociażby console.log, to zobaczyłbyś, że wynikowa tablica obiektów jest jednoelementowa i wiedziałbyś z czego wynika błąd z undefined.

0
Maciej Cąderek napisał(a):

Po pierwsze id powinno być unikalne. O ile można pobrać wiele elementów z tym samym id (chociazby za pomocą document.querySelectorAll), to twórcy JQuery widocznie wybrali opcję z szybszym działaniem metody (wyszukiwanie tylko pierszego elementu), zakładając, że użytkownik stosuje dobre praktyki i nie ma wielokrotnych wystapień identyfikatorów. Proponuję zamiast atrybutu id użyć atrybutu class bądź data-, które nie muszą mieć unikalnych wartości.

Btw, jakbyś użył debuggera lub chociażby console.log, to zobaczyłbyś, że wynikowa tablica obiektów jest jednoelementowa i wiedziałbyś z czego wynika błąd z undefined.

Witam, dziękuję za odpowiedz.

pobrałem element <audio> poprzez id ponieważ miałem nadzieję że w ten sposób będę posiadał wszystkie elementy source i będę mógł nimi manipulować. Skorzystałem z metody get.ElementsBy ClassName("...") i wyświetliłem za pomocą consol.log. Wcześniej korzystałem z alert(zmienna) i przy source [0] dostałem odpowiedz object ...... a przy [1] undefined. Nie sprawdzałem za pomocą consol.log gdyż jestem początkującym i trudno mi wyczytać to co chcę wiedzieć.
Rozumiem, że pobierając za pomocą get.ElementsBy ClassName("...") mam w tablicy tylko jeden element, pozostała jest niewidoczna. Dlaczego tak się dzieje? nie wiem.

0

Pokaż kod

1 użytkowników online, w tym zalogowanych: 0, gości: 1