Existe-t-il un moyen de faire cela en javascript?

Question

Tout ce que je veux faire, c'est rendre le code ci-dessous plus compressé, car j'ai des centaines de mots à vocaliser.

<audio id="aufgabe" preload="auto">
        <source src="../../../audio/aufgabe.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
    <button id="idj-play-button" class="btn btn-xs"><i class="glyphicon glyphicon-play"></i></button>
    <button id="idj-pause-button" class="btn btn-xs hide"><i class="glyphicon glyphicon-pause"></i></button>


<script>
    $('#idj-play-button').click(function() {
        document.getElementById('aufgabe').play();
        $('#idj-play-button').addClass('hide');
        $('#idj-pause-button').removeClass('hide');

    });

    $('#idj-pause-button').click(function() {
        document.getElementById('aufgabe').pause();
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
    });

    $('#aufgabe').on('ended', function() {
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
        $('#aufgabe').load();
    });

</script>

Je n'ai presque aucune connaissance en javascript, donc je me demandais s'il y avait un moyen de faire une sorte de fonction, par exemple:

function vocalizeFile(aufgabe);

Qui mène aux autres fonctions

<script>
    $('#idj-play-button').click(function() {
        document.getElementById('aufgabe').play();
        $('#idj-play-button').addClass('hide');
        $('#idj-pause-button').removeClass('hide');

    });

    $('#idj-pause-button').click(function() {
        document.getElementById('aufgabe').pause();
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
    });

    $('#aufgabe').on('ended', function() {
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
        $('#aufgabe').load();
    });

</script>

Donc je n'ai pas à faire de copie de ce code à chaque fois. Merci d'avance!

javascript jquery html function audio

1

Vi0nik 7 mars 2016 à 22:44

Answer 1

Vous pouvez déclencher l'événement en créant un attribut de données personnalisé et en lui associant un événement de clic:

HTML:

<audio id="aufgabe" preload="auto">
     <source src="../../../audio/aufgabe.mp3" type="audio/mpeg">Your browser does not support the audio element.
</audio>

<button id="idj-play-button" class="btn btn-xs" data-action="play" data-target="#aufgabe">
Play
</button>
<button id="idj-pause-button" class="btn btn-xs hide" data-action="pause" data-target="#aufgabe">
Pause
</button>

JQuery:

  $('body').on('click','[data-action]',function() {
    var action = $(this).data('action');
    var target = $(this).data('target');
    switch(action) {
      case 'play': 
            $(target)[0].play();
      break;
      case 'pause':
            $(target)[0].pause();
      break;
    }
    console.log('Called action ',action,' on element ',target);
  });

De cette façon, il vous suffit d'ajouter data-action=[action-name] et data-target=#idOfTarget à chaque bouton et ils fonctionneront sur n'importe quel élément <audio> valide avec l'ID spécifié.

1

vcanales 19 févr. 2018 à 00:06

Answer 2

Je viens de compresser votre code et maintenant il ressemble à ceci:

var $play = $('#idj-play-button');
var $pause = $('#idj-pause-button');
var $aufgabe = $('#aufgabe');

$play.on('click', function() {
    playAudio();
    toggleButtons();
});

$pause.on('click', function() {
    pauseAudio();
    toggleButtons();
});

$aufgabe.on('ended', function() {
    loadAudio();
    toggleButtons();
});

var toggleButtons = function() {
    $play.toggleClass('hide');
    $pause.toggleClass('hide');
}

var playAudio = function() {
    $aufgabe.play();
}

var pauseAudio = function() {
    $aufgabe.pause();
}

var loadAudtion = function() {
    $aufgabe.load();
}

Au début, j'ai mis en cache tous les éléments ... Si votre variable contient un élément, je vous recommande de le démarrer avec $, car il nous dit que la variable est un élément jquery.

Si vous devez ajouter une classe puis la supprimer, vous devez utiliser toggleClass.

Le code qui manipule avec l'audio a été divisé par fonctions, car nous devons maintenir un niveau d'abstructions.

0

Sasha Bichkov 9 mars 2016 à 19:21

Answer 3

var $play = $('#idj-play-button');
var $pause = $('#idj-pause-button');
var $aufgabe = $('#aufgabe');

$play.click(playAudio);

$pause.click(pauseAudio);

$aufgabe.on('ended', onEnd);

var toggleButtons = function() {
    $play.toggleClass('hide');
    $pause.toggleClass('hide');
}

var playAudio = function() {
    $aufgabe.play();
    toggleButtons();
}

var pauseAudio = function() {
    $aufgabe.pause();
    toggleButtons()
}

var onEnd = function() {
    $aufgabe.load();
    toggleButtons();
}

1

Darshan 7 mars 2016 à 20:09

Existe-t-il un moyen de faire cela en javascript?

3 réponses

Questions connexes

De nouvelles questions

javascript