Χρησιμοποιήστε μια λειτουργία JavaScript για να επιτρέψετε στους επισκέπτες του ιστότοπου να παίξουν ένα MP3.
Υπάρχουν διάφοροι τρόποι για να ενσωματώσετε και να παίξετε αρχεία ήχου MP3 στις ιστοσελίδες σας. Η καταργημένη ετικέτα "ενσωμάτωση" σε HTML, διάφορα προγράμματα αναπαραγωγής Flash και προγράμματα αναπαραγωγής που βασίζονται σε Java είναι όλα παραδείγματα. Το πρότυπο HTML5, με την έμφαση που δίνει στο σενάριο και την έλλειψη εξάρτησής του από λογισμικό τρίτων, προσφέρει τον πιο συμβατό τρόπο ενσωμάτωσης και αναπαραγωγής MP3 σε ιστοσελίδες στο μέλλον. Ενσωματώστε το αρχείο MP3 με το αντικείμενο "ήχου" HTML5 και, στη συνέχεια, χρησιμοποιήστε μια συνάρτηση JavaScript για να ξεκινήσει η αναπαραγωγή του
Βήμα 1
Προσθέστε τον ακόλουθο κώδικα στο σώμα του εγγράφου HTML:
Το βίντεο της ημέρας
Αυτός ο κώδικας ενσωματώνει και φορτώνει το αρχείο MP3, αλλά δεν το αναπαράγει. Η τιμή της ετικέτας "src" περιέχει τη διαδρομή προς και το όνομα αρχείου του αρχείου MP3.
Βήμα 2
Προσθέστε τον ακόλουθο κώδικα JavaScript μεταξύ των ετικετών "head" του εγγράφου HTML σας:
Αυτή η συνάρτηση, όταν καλείται, έχει πρόσβαση στο στοιχείο "ήχος" με το αναγνωριστικό της ("mp3") και χρησιμοποιεί τη μέθοδο play() για να την αναπαράγει.
Βήμα 3
Προσθέστε ένα κουμπί στην ιστοσελίδα για να καλέσετε τη λειτουργία "playMP3" όταν ο χρήστης κάνει κλικ σε αυτήν. Προσθέστε τον ακόλουθο κώδικα στο σώμα του εγγράφου HTML:
Αλλάξτε το χαρακτηριστικό "value" για να δώσετε στο κουμπί διαφορετικό τίτλο.
Βήμα 4
Χρησιμοποιήστε την ακόλουθη λειτουργία αντί για "playMP3" για να αφήσετε τον χρήστη να σταματήσει το αρχείο μετά την εκκίνηση:
συνάρτηση playpauseMP3(){ if (document.getElementById("mp3").paused){ document.getElementById("mp3").play(); }else{ document.getElementById("mp3").pause(); } }
Αλλάξτε το χαρακτηριστικό "onClick" της ετικέτας "input" στο Βήμα 3 για να ταιριάζει με το όνομα αυτής της συνάρτησης.
