Konular

Control HTML5 Audio With Jquery

 Control HTML5 Audio With Jquery 

 

You can consider this tutorial as a consequence of my earlier html5 audio API tutorial. In this tutorial, we will see, how to control the audio with jQuery. This is handy if you are about to develop a dynamic application that make use of several audio media and want to control them from your jQuery script efficiently. Lets start rolling!

How Far We Can Control?

Well, we can control almost every feature that default HTML5 player provides like play/pause/volume up/down, mute on/off etc and additional functionality like stop,forward/backward capability etc.
Control HTML5 Audio With Jquery
So, if you have N number of audio files on a single page, and instead of letting user dealing with N audio players, you can give it an efficient interface and control what to play/stop etc with jQuery.

 


Checkout The jQuery Audio Controller Demo

 

The Audio Media:

Lets use the following code as our HTML5 code for the audio media:

1
2
3
4
<audio class="audioDemo" controls preload="none">
   <source src="audio/pitbull.mp3" type="audio/mpeg">
   <source src="audio/music.ogg" type="audio/ogg">
</audio>

We have kept two media, because of compatibility issue on browsers, so that alternative one being loaded.

Loading The Audio With jQuery:

as you can see on the above HTML5 code, we have set the “preload” option to “none”, which means, no information about the audio file will be loaded on page load, neither the audio file nor any metadata. We will do them by ourselves from jQuery to boost the page load performance. Lets use the following code to load the audio:

1
$(".audioDemo").trigger('load');

We can also add event listener to know when its loaded. However, the event will be triggered immediate after the metadata loaded and audio starts loading. But it won’t wait till the audio loads in full, which usually loads on demand. To do something after the loading, use the following code before triggering the load event:

1
2
3
$(".audioDemo").bind("load",function(){
        $(".alert-success").html("Audio Loaded succesfully");
    });

Play/Pause/Stop Audio:

Start playing audio and to pause it is fairly easy to handle, just need to trigger corresponding events as below:

1
2
3
4
//starts playing
$(".audioDemo").trigger('play');
//pause playing
$(".audioDemo").trigger('pause');

However, there is not ready event to stop an audio, so we will need to do it with help of ‘pause’ event and another property named “currentTime”, which indicates the current playing time. Here is what will do to stop:

1
2
3
4
5
6
function stopAudio(){
  //pause playing
  $(".audioDemo").trigger('pause');
  //set play time to 0
  $(".audioDemo").prop("currentTime",0);
}

Forward/Backward Capability:

Default HTML5 player doesn’t provide these facility, but we can easily make such functionality with a little jQuery code. Here is a small example code to do so:

1
2
3
4
//forward the music about 5 seconds
$(".audioDemo").prop("currentTime",$(".audioDemo").prop("currentTime")+5);
//backward the music about 5 seconds
$(".audioDemo").prop("currentTime",$(".audioDemo").prop("currentTime")-5);

Volume Up/Down:

Audio player has its own “volume” properly which can be controlled with jQuery as below:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
function volumeUp(){
    var volume = $(".audioDemo").prop("volume")+0.2;
    if(volume >1){
        volume = 1;
    }
    $(".audioDemo").prop("volume",volume);
}
 
function volumeDown(){
    var volume = $(".audioDemo").prop("volume")-0.2;
    if(volume <0){
        volume = 0;
    }
    $(".audioDemo").prop("volume",volume);
}

We need to keep checking whether volume reaches its largest or minimum value, otherwise JavaScript exception error will be thrown.

Mute On/Off:

We can instantly make an audio off and turn on to its earlier volume level easily with use of “muted” property. See the example code below, which actually toggle current mute state:

1
2
3
function toggleMuteAudio(){
    $(".audioDemo").prop("muted",!$(".audioDemo").prop("muted"));
}

 

Kaynak

 

Yorumunuzu Ekleyin

JQuerye Giriş

JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.

33,640 Okunma 3 Yorum 07/07/2011 18:40:09 18/02/2014 22:11:40

jQuery ve AJAX işlemleri

Bu yazıda jQuery kütüphanesi ile AJAX işlemlerinin nasıl yapıldığından bahsedeceğim. Prototype ve MooTools kütüphanelerini de kullanmış biri olarak size söyleyebilirim ki AJAX işlemlerinin en kolay ve esnek bir şekilde jQuery ile yapılabildiğini gördüm. Eminim ki yazının sonunda bu konuda bana hak vereceksiniz, çünkü gerçekten jQuery ile bir AJAX işlemi yapmak çok kolay..

28,685 Okunma Henüz yorum yapılmamış 31/10/2012 02:07:16 31/10/2012 02:07:04

Jquery ile Form İşlemleri

Jquerynin bize sağlıcağı en büyük kazanç şüpesiz farklı browserlar için tek kod kullanmak.

22,139 Okunma Henüz yorum yapılmamış 26/07/2011 12:12:10 17/10/2016 01:27:42

Jquery Kısa Teknikler

Jquery kullanırken yardımcı olacak bir kaç detay...

21,248 Okunma Henüz yorum yapılmamış 18/08/2018 13:33:35 11/04/2020 03:22:50

JQuery Olayları (Events)

Bir nesenin tetiklenmesini sağlayan olay çeşitleri

19,364 Okunma Henüz yorum yapılmamış 15/01/2014 20:55:49

JQuery Nedir?

Jquery, javascript ile hep yapmak isteyip, karışık JS programlama dili yüzünden bir türlü yapamadığınız kodlamayı çok kolay ve hızlıca yapmanızı sağlayan javascript kütüphanesidir.Diğer bir güzel yanı da jquery ile yazılan kodun tüm popüler tarayıcılarda sorunsuz çalışmasıdır, sizin kod üzerinde tarayıcı uyumluluğu çalışması yapamanıza gerek yoktur.

19,121 Okunma Henüz yorum yapılmamış 21/06/2011 23:58:55 08/11/2014 23:59:12

JQuery Özellik Şemaları

JQuery tüm özellikleriyle bu şemalarda saklı.

18,129 Okunma Henüz yorum yapılmamış 03/12/2012 02:27:58 03/12/2012 02:30:15

jQuery Ajax File Upload

PHP ile dosya yükleme işlemi yaparken kullanıcılara Upload durumunun hangi aşamada olduğunu yüzdesel olarak veya bir progres bar ile göstermek elbette daha güzel olur.

15,772 Okunma Henüz yorum yapılmamış 03/02/2015 16:45:48 12/06/2015 18:50:46

Yükleniyor...