Muzyka na po kliknięciu na przycisk?

[MIKEKING]

Chciałbym zrobić coś takiego, że jeśli użytkownik kliknie na przycisk to włączy się muzyka na stronie i analogicznie jeżeli kliknie na ten sam przycisk muzyka się wyłączy. Próbowałem zrobić coś takiego: Nie wiem czy dobrze to robię. Proszę o pomoc.

 

JavaScript

$(".my_audio").trigger('load');

document.getElementById('play_stop').onclick = function play_audio() 
{
   $(".my_audio").trigger('play');
}​;​

document.getElementById('play_stop').onclick = function play_audio() 
{
    $(".my_audio").trigger('pause');
    $(".my_audio").prop("currentTime",0);
}​;​

index.html

<a id="play_stop" href="#">Włącz</a>
<audio class="my_audio">
	<source src="songs/1.mp3" type="audio/mpeg">
</audio>

[Fennec]

Musisz użyć switch'a (przy włączeniu zmieniasz wartość np. gra = 1)

(Link do dokumentacji) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Funkcję play_audio zainicjuj oddzielnie:

function play_audio(){
code...
}

<onclick>

 

[Doctrine]

Zrób sobie zmienną która będzie zawierała aktualny stan dźwięku:

"pause" - nie gra

"play" - gra

Sprawdzaj po każdym kliknięciu w element wartość tej zmiennej i adekwatnie do tego włączaj dźwięk lub wyłączaj.

[ZOBACZ JAK DZIAŁA CAŁOŚĆ]

 

 

Zmieniłem id twojego elemenu play_stop na play_state bo ta nazwa lepiej odpowiada funkcji tego przycisku na stronie.

<a id="play_state" href="#">Włącz</a>
<audio class="my_audio">
	<source src="songs/1.mp3" type="audio/mpeg">
</audio>

 

 

Zauyważyłem również że łapiesz elementy natywnym js'em jak i używasz do tego jQuery. Po co mieszać te dwie metodyki, gdy używasz już tej biblioteki?

document.getElementById('play_stop') // Złap element o id "play_stop" i zwróć jako czysty obiekt DOM
$("#play_stop") // Złap element o id "play_stop" i zwróć jako obiekt jQuery

Różnice tutaj

Jeśli działasz w obrębie jQuery lepiej trzymać się tej drugiej metodyki.

 

 

A to mój JS, jeśli coś nie zrozumiałe to pisz śmiało.

$(function() {
 var audio = $(".my_audio");
 var playState = $("#play_state");
 var state = 'pause';
  
 playState.on("click", function(e){
   e.preventDefault();
   if (state=='pause') {
    state='play';
    playState.text("Wyłącz");
    }
   else if(state=='play'){
     state='pause';
     playState.text("Włącz");
     audio.prop("currentTime",0);
    }
   audio.trigger(state);
 });
});