Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][js][html5] stylowanie audio
Forum PHP.pl > Forum > Przedszkole
Mefiuu
Witam serdecznie forumowiczów !

Próbuję stworzyć stronę, na której będzie możliwość odtwarzania kilku piosenek w mp3. Zastanawiam się czy jest jakaś możliwość ostylowania standardowego taga <audio> z html5 ? Bo szukam po internecie gotowych rozwiązań, trafiłem na amplitude.js oraz na jPlayer ale w każdym trzeba zadeklarować listę utworów w js a ja chcę listę pobierać z bazy. Do tego ma być na stronie kilka tych odtwarzaczy jak już wspomniałem, a w pluginach nie widzę takiej możliwości.

Chcę ostylować htmlowy <audio> bo niepotrzebne mi ani przyciski przewijania, stopowania ani pasek postępu, ani zapętlanie - tylko i wyłącznie start/pauza w jednym przycisku.

Ktoś spotkał się z czymś takim ?

Pozdrawiam !
mls
Ostylować - nie.
Obsłużyć za pomocą JS - tak.
Mefiuu
znalazłem w sieci rozwiązania z metodami play(); i pause(); jednak coś nie śmiga w połączeniu z jquery.
naskrobałem sobie taki kod:

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $('button.play').click(function() {
  3. var music = $(this).next().children();
  4.  
  5. music.get(0).play();
  6.  
  7. });
  8. });
[JAVASCRIPT] pobierz, plaintext


aczkolwiek konsola wyrzuca mi błąd :

Cytat
TypeError: aaa.get(...).play is not a function
aaa.get(0).play();


wyczytałem że jquery zwraca obiekt w którym nie ma metody play() - dość logiczne. Znalazłęm również informację, że należy użyć get(0) jednak rezultat jest widoczny. Ktoś się orientuje jak mogę wydobyć tę metodę ?

Pozdrawiam !
trueblue
A jak wygląda kawałek html za button.play?
Mefiuu
  1. <div class="player">
  2. <button class="play"> start</button>
  3. <audio controls>
  4. <source src="music/mp3/swit.mp3" type="audio/mpeg" id="aaa">
  5. Your browser does not support the audio element.
  6. </audio>
  7. </div>


tak to wygląda, ten mój kod js ładnie pobiera element <source> ale no wywala ten błąd kurczę sad.gif
trueblue
Wywołujesz metodę na <source>, a powinieneś na <audio>.

  1. var music = $(this).next()[0];
  2. music.play();
Mefiuu
exclamation.gif dziękuję.

czasem na najprostsze rozwiązania najtrudniej wpaść samemu ...

dziękuję jeszcze raz ! smile.gif

pozdrawiam.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.