Υποενότητα 2.2: Πολυμέσα

Το στοιχείο (element ) Audio είναι μια νέα δυνατότητα στο HTML5.

Η ετικέτα τουείναι <audio>. Χρησιμοποιώντας<audio> μπορούμε να προσθέσουμε ένα αρχείο ήχου στην ιστοσελίδα μας. Οι μορφές ήχου που υποστηρίζονται στο HTML5 είναι  .mp3, .wav και.ogg. Προς το παρόν μόνο ο ιChrome, Firefox και Opera υποστηρίζουν όλες αυτές τις μορφές. Παρόμοια με τις εικόνες, η διεύθυνση url του αρχείου ήχου ορίζεται με το χαρακτηριστικό src attribute.

Παράδειγμα:

<audio >
    <source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Επιπλέον, μπορούμε να προσθέσουμε τα χαρακτηριστικά ελέγχου στον ήχο μας. Αυτό θα εμφανίσει μια μπάρα που θα έχει στοιχεία ελέγχου αναπαραγωγής (π.χ. αναπαραγωγή-play  και ένταση-volume )

Παράδειγμα:

<audio controls>
    <source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Επίσης, αν θέλουμε να διασφαλίσουμε ότι ο χρήστης θα μπορεί να ακούσει τον ήχο μας ανεξάρτητα από το ποιο πρόγραμμα περιήγησης χρησιμοποιεί, μπορούμε να φορτώσουμε πολλές μορφές του ίδιου ήχου. Αυτό επιτυγχάνεται με τη χρήση του στοιχείου <source>  που τοποθετείται μεταξύ της ετικέτας έναρξης και τερματισμού <audio>. Εσωστερικά του src τοποθετούμε τη διέυθυνση του αρχείου ήχου. <source> δεν έχει τελική ετικέτα. Το πρόγραμμα περιήγησης θα εμφανίσει την πρώτη αναγνωρίσιμη μορφή.

Παράδειγμα:

<audio controls>
    <source src="media/myaudio.ogg" type="audio/ogg">
    <source src="media/myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Περισσότερες πληροφορίες: https://www.w3schools.com/html/html5_audio.asp

Άσκηση

1. Ανοίξτε το αρχείο exersice02.2.html στον φάκελο "Exercises" στον επεξεργαστή κώδικα.
2. Επεξεργαστείτε και αποθηκεύστε το αρχείο. Θα βρείτε τα αρχεία "myaudio.mp3" και "myaudio.ogg" στον φάκελο "media". Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: