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!
3 réponses
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é.
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.
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();
}