Το στοιχείο ήχου στην HTML 5

Εφόσον ο Firefox 3.5, ο Chrome 3, ο Opera 10.5 και ο Safari 4, υποστηρίζουν σε μεγάλο βαθμό την HTML 5, μπορούμε να κάνουμε δοκιμές σε διάφορα στοιχεία της, όπως για παράδειγμα την εισαγωγή ήχων χωρίς τη χρήση του Flash. Όπως θα δείτε, θα δημιουργήσουμε ένα βασικό στοιχείο <audio> και θα ορίσουμε μερικές από τις ιδιότητες του.

Το στοιχείο audio

<audiο autoplay="autoplay” controls="controls">
        <source src="file.ogg"/>
        <source src="file.mp3" />
</audio>

Το στοιχείο audio έχει μια μικρή σειρά από παραμέτρους. Οι ποιο σημαντικές είναι οι ακόλουθες :
audioplay: παίζει αυτόματα τον ήχο με την ολοκλήρωση της φόρτωσης της σελίδας.
controls: προβάλει τα στοιχεία πλοήγησης του ήχου στη σελίδα
preload: αρχίζει άμεσα να αποθηκεύει τον ήχο τοπικά. Οι τιμές που μπορεί να πάρει είναι οι ακόλουθες (none, auto, metadata)
src: Η διαδρομή μέχρι το αρχείο. Είναι προτιμότερο όμως να ορίζετε αυτή την ιδιότητα με το υπό-στοιχείο «source»

Ο Mozilla και οι Webkit περιηγητές δεν ανταποκρίνονται πλήρως όταν πρόκειται για μορφή audio. Ο Firefox περιμένει να δει ένα αρχείο .ogg, ενώ οι Webkit λειτουργούν πολύ καλά με το κοινό format .mp3. Αυτό σημαίνει, πως τουλάχιστον για τώρα, θα πρέπει να δημιουργείτε δύο εκδόσεις του ίδιου ήχου. Σας προτείνω αν θέλετε να χρησιμοποιήσετε ένα online γρήγορο και εύκολο στη χρήση εργαλείο, που ονομάζετε Media.io, για να μετατρέψετε τα mp3 αρχεία σας σε ogg.

Ο Safari όταν φορτώνει τη σελίδα, δεν αναγνωρίζει το .ogg αρχείο και έτσι το προσπερνά για να πάει στο mp3. Έχετε υπόψη σας πως ο Internet Explorer δεν υποστηρίζει ακόμα την νέα έκδοση της HTML, καθώς επίσης και οι περιηγητές της Opera πριν την έκδοση 10 υποστηρίζουν μόνο αρχεία τύπου .wav.

Φορτώνοντας ήχους με το jQuery

$(document).ready(function()
{
    //Δημιουργεί ένα στοιχείο ήχου, το ορίζει να παίζει αυτόματα,
    // και εμφανίζει το στοιχείο, αφού ολοκληρωθεί το φόρτωμα της σελίδας.
    var audio = $(
        '<audio>',
        {
            autoPlay : 'autoplay',
            controls : 'controls'
        }
    );

    // Κλήση της συνάρτησης addSource, και ορισμός των παραμέτρων
    // Η πρώτη παράμετρος είναι το στοιχείο ήχου που δημιουργήσαμε προηγούμενος
    // Και η δεύτερη παράμετρος είναι το όνομα και θέση του αρχείου ήχου
    addSource(audio, 'audioFile.ogg');
    addSource(audio, 'audioFile.mp3');

    // Κώδικας που εκτελείτε μετά από κάποιο γεγονός
    $('a').click(
        function()
        {
            // Εισάγει το στοιχείο ήχου, και τη πηγή του ήχου στη σελίδα
            audio.appendTo('body');

            // Σβήνει σταδιακά το σύνδεσμο από τη σελίδα για να μην κάνει δεύτερη φορά ο χρήστης Click
            $(this).fadeOut('slow');

            return false;
        }
    );

    function addSource(elem, path)
    {
        $('<source>').attr('src', path).appendTo(elem);
    }
}
);

</audio>

Έχετε κατά νου πως με τη χρήση σεναρίων JavaScript έχουμε πάρα πολλές δυνατότητες, όπως είναι το σταμάτημα ενός ήχου, η αλλαγή της έντασης και άλλα. Αυτό το μικρό άρθρο έχει τόσες πληροφορίες όσες χρειάζονται για να σας ανοίξει απλά η όρεξη.

Περισσότερα για τον CorfuGmr

Όλα τα άρθρα

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.

Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL