CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionaudio
Vi0nik
Vi0nik

Reputation: 345

Is there a way to do this in javascript?

All I want to do is to make the code below more compressed, because i have hundreds of words to vocalize.

<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>

I have almost zero knowledge in javascript so I was wondering is there any way to make some kind of function, for example:

function vocalizeFile(aufgabe);

that leads to the other functions

<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>

so I dont have to make copy of this code everytime. Thanks in advance!

Upvotes: 1

Views: 97

Answers (3)

vcanales
vcanales

Reputation: 1828

You can trigger the event creating a custom data attribute and attaching a click event to it:

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);
  });

This way you just have to add data-action=[action-name] and data-target=#idOfTarget to each button and they'll work on any valid <audio> element with the specified id.

Upvotes: 1

Alexander Bychkov
Alexander Bychkov

Reputation: 78

I've just compressed your code and now it looks like this:

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();
}

At first, I've cached all elements... If your variable contains an element, I recommend that you start it with $, because it says us that the variable is a jquery-element.

If you need to add class and then remove it, you should use toggleClass.

The code that manipulates with audio was divided by functions, because we need to maintain one level of abstructions.

Upvotes: 0

Darshan
Darshan

Reputation: 1074

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();
}

Upvotes: 1

Related Questions