Hot Potatoes – Εισαγωγή ήχου mp3

Γενικά

Αυτό που δημιουργεί τα περισσότερα προβλήματα στους χρήστες του Hot Potatoes είναι η εισαγωγή πολυμεσικών στοιχείων και κυρίως ήχου και βίντεο.

Στο Hot Potatoes μπορούμε να βάλουμε εικόνες, ήχους και βίντεο από το μενού Εισαγωγή [Insert] αλλά στην πράξη αυτό αποδεικνύεται μια μεγάλη περιπέτεια. Κι αυτό επειδή υπάρχει μια μεγάλη σειρά παραμέτρων που δεν είναι δυνατόν να γνωρίζουμε, όταν φτιάχνουμε τις ασκήσεις μας.
Όπως, το λειτουργικό σύστημα κάθε χρήστη,  οι κωδικοποιητές ήχου και βίντεο που έχει εγκατεστημένους ο καθένας στον ΗΥ του,  τα προγράμματα (media player, real player, quick time …) που έχει κάθε χρήστης για να ανοίγει τα διάφορα πολυμεσικά αρχεία (.wav, .au, .mp3, .avi κλπ.), το πρόγραμμα πλοήγησης (browser) που διαθέτει ο καθένας κ.ά.

Οπότε για να πετύχουμε τη μεγαλύτερη δυνατή συμβατότητα θα πρέπει να χρησιμοποιήσουμε κάτι που:

  • να συμπεριφέρεται με παρόμοιο τρόπο στα περισσότερα λειτουργικά συστήματα
  • να “τρέχει” στα πιο δημοφιλή προγράμματα πλοήγησης (browsers)
  • να υποστηρίζει αρχεία ήχου που παίζουν σε όλους τους ΗΥ.

Η λύση είναι ένα πακέτο που αποτελείται από μια εφαρμογή flash και ήχους κωδικοποιημένους στο πιο δημοφιλές format ήχου, το mp3! Από την πλευρά του χρήστη το μόνο που χρειάζεται είναι το δημοφιλές flash player plugin.

Στις οδηγίες παρακάτω θα εξηγήσω με ποιο τρόπο μπορούμε να εισάγουμε ήχους σε μια σελίδα Hot Potatoes όπου ο χρήστης κάνει κλικ σε ένα χειριστήριο και ακούει τον ήχο. Μπορεί να τον σταματήσει, να τον ακούσει κι άλλες φορές κλπ.

Εισαγωγή ήχου mp3 με χειριστήριο

ΟΔΗΓΙΕΣ

Τι θα χρειαστείτε:

  • Μια άσκηση του Hot Potatoes
  • Τα αρχεία με τα flash χειριστήρια (μορφής .swf) και τον κώδικα που πρέπει να εισαχθεί για το καθένα (μορφής .txt)
  • Μερικούς ήχους σε μορφή mp3.
Κάντε κλικ για να κατεβάσετε τα αρχεία

Kάντε κλικ στον φάκελο δίπλα για να τον κατεβάσετε, αποσυμπιέστε τον και χρησιμοποιήστε τα αρχεία σύμφωνα με τις οδηγίες που ακολουθούν.

Σημείωση: Στον φάκελο zip περιέλαβα 3 διαφορετικά χειριστήρια ώστε να έχετε τη δυνατότητα επιλογής. Στις σελίδες που θα φτιάξετε μπορείτε να χρησιμοποιήσετε μόνο το ένα ή και όλα…

Δείτε ένα παράδειγμα που περιλαμβάνει και τα τρία χειριστήρια.
Πατήστε το κουμπί <= της άσκησης για να επιστρέψετε σ’ αυτή τη σελίδα.

Δυσκολία

Σχετικά δύσκολο

Απαιτούμενος χρόνος

20 λεπτά (εφόσον έχετε έτοιμα τα αρχεία ήχου)

Τι πρέπει να γνωρίζετε;

  • Να φτιάχνετε αρχεία Hot Potatoes
  • Τα στοιχειώδη από html.
  • Επιθυμητή η γνώση Javascript
  • Να μετατρέπετε αρχεία ήχου σε mp3.

Τι πρέπει να κάνετε;

  • Αρχικά φτιάξτε έναν φάκελο όπου θα αποθηκεύσετε:
    • το αρχείο Hot Potatoes που θα δημιουργηθεί
    • τα αρχεία ήχου mp3
    • το/τα αρχείο/αρχεία με τα flash χειριστήρια (μορφής .swf)
    • την τελική ιστοσελίδα μορφής .htm
  • Δημιουργήστε μια άσκηση στο Hot Potatoes (το παράδειγμα είναι με το JQuiz)

1ο Χειριστήριο Απλό χειριστήριο

  • Ανοίξτε τώρα το αρχείο hbs_mp3_player.txt (πρέπει να είναι στον φάκελο zip που κατεβάσατε και αποσυμπιέσατε προηγουμένως)
  • Στο αρχείο αυτό περιλαμβάνεται ο κώδικας για την εισαγωγή ενός απλού χειριστηρίου της μορφής Απλό χειριστήριο. [Δημιουργός του είναι ο Martin Holmes και σχετικές πληροφορίες  μπορείτε να βρείτε στη διεύθυνση: http://hotpot.uvic.ca/howto/audio.htm]
  • Επιλέξτε όλο το περιεχόμενο του αρχείου, αντιγράψτε το (Ctrl+C)…
  • και επικολλήστε το (Ctrl+V) στο σημείο όπου θέλετε να τοποθετηθεί το χειριστήριο ήχου στην άσκηση του Hot Potatoes (στο παράδειγμα έβαλα χειριστήριο ήχου σε κάθε ερώτηση).
  • Τώρα θα πρέπει να ορίσετε το σημείο όπου βρίσκεται το αρχείου ήχου που θα παίζει το χειριστήριο.  Προσέξτε τα σημεία με κόκκινο χρώμα.
    Όπου γράφει hbs_mp3_player.swf αυτό είναι το όνομα αρχείου για το χειριστήριο, επομένως μπορείτε να το αφήσετε ως έχει.
    Όπου γράφει your_audio_file.mp3 αυτό είναι το όνομα του αρχείου ήχου. Εγώ το άλλαξα σε rain.mp3 αφού στην 1η ερώτηση έβαλα ένα αρχείου ήχου μ’ αυτό το όνομα.

<object data=”hbs_mp3_player.swf” width=”24″ height=”17″ style=”vertical-align: bottom;” type=”application/x-shockwave-flash”>
<param name=”type” value=”application/x-shockwave-flash” />
<param name=”src” value=”hbs_mp3_player.swf” />
<param name=”data” value=”hbs_mp3_player.swf” />
<param name=”codebase” value=”hbs_mp3_player.swf” />
<param name=”FlashVars” value=”TheSound=rain.mp3″ />
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”hbs_mp3_player.swf” />
<param name=”loop” value=”false” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
<a href=”narrative1.mp3″>rain.mp3</a>
</object>

  • Μπορείτε να δείτε στην εικόνα πώς ακριβώς το έβαλα στην άσκηση του Hot Potatoes
    κλικ στην εικόνα για να μεγαλώσει

2ο Χειριστήριο Χειριστήριο με 3 κουμπιά και slider

  • Ανοίξτε τώρα το αρχείο hbs_mp3player3but.txt (πρέπει να είναι στον φάκελο zip που κατεβάσατε και αποσυμπιέσατε προηγουμένως)
  • Στο αρχείο αυτό περιλαμβάνεται ο κώδικας για την εισαγωγή ενός χειριστηρίου τριών κουμπιών της μορφής Χειριστήριο με 3 κουμπιά και slider [Δημιουργός του είναι ο Bernard Dyer ]
  • Επιλέξτε όλο το περιεχόμενο του αρχείου, αντιγράψτε το (Ctrl+C)…
  • και επικολλήστε το (Ctrl+V) στο σημείο όπου θέλετε να τοποθετηθεί το χειριστήριο ήχου στην άσκηση του Hot Potatoes (στο παράδειγμα έβαλα χειριστήριο ήχου σε κάθε ερώτηση).
  • Τώρα θα πρέπει να ορίσετε το σημείο όπου βρίσκεται το αρχείου ήχου που θα παίζει το χειριστήριο.  Προσέξτε τα σημεία με κόκκινο χρώμα.
    Όπου γράφει hbs_mp3player3but.swf αυτό είναι το όνομα αρχείου για το χειριστήριο, επομένως μπορείτε να το αφήσετε ως έχει.
    Όπου γράφει your_audio_file.mp3 αυτό είναι το όνομα του αρχείου ήχου. Εγώ το άλλαξα σε thunder.mp3 αφού στη 2η ερώτηση έβαλα ένα αρχείου ήχου μ’ αυτό το όνομα.

<object type=”application/x-shockwave-flash” data=”hbs_mp3player3but.swf” width=”150″ height=”20″ style=”vertical-align: middle;”>
<param name=”type” value=”application/x-shockwave-flash” />
<param name=”src” value=”hbs_mp3player3but.swf” />
<param name=”data” value=”hbs_mp3player3but.swf” />
<param name=”codebase” value=”hbs_mp3player3but.swf” />
<param name=”FlashVars” value=”TheSound=thunder.mp3″ />
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”hbs_mp3player3but.swf” />
<param name=”loop” value=”false” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
</object>

  • Μπορείτε να δείτε στην εικόνα πώς ακριβώς το έβαλα στην άσκηση του Hot Potatoes
    κλικ στην εικόνα για να μεγαλώσει

3ο Χειριστήριο Χειριστήριο με 2 κουμπιά και slider

  • Ανοίξτε τώρα το αρχείο hbs_mp3_player2but_narrow_slider.txt (πρέπει να είναι στον φάκελο zip που κατεβάσατε και αποσυμπιέσατε προηγουμένως)
  • Στο αρχείο αυτό περιλαμβάνεται ο κώδικας για την εισαγωγή ενός χειριστηρίου τριών κουμπιών της μορφής Χειριστήριο με 1 κουμπί και slider [Δημιουργός του είναι ο Bernard Dyer ]
  • Επιλέξτε όλο το περιεχόμενο του αρχείου, αντιγράψτε το (Ctrl+C)…
  • και επικολλήστε το (Ctrl+V) στο σημείο όπου θέλετε να τοποθετηθεί το χειριστήριο ήχου στην άσκηση του Hot Potatoes (στο παράδειγμα έβαλα χειριστήριο ήχου σε κάθε ερώτηση).
  • Τώρα θα πρέπει να ορίσετε το σημείο όπου βρίσκεται το αρχείου ήχου που θα παίζει το χειριστήριο.  Προσέξτε τα σημεία με κόκκινο χρώμα.
    Όπου γράφει hbs_mp3_player2but_narrow_slider.swf αυτό είναι το όνομα αρχείου για το χειριστήριο, επομένως μπορείτε να το αφήσετε ως έχει.
    Όπου γράφει your_audio_file.mp3 αυτό είναι το όνομα του αρχείου ήχου. Εγώ το άλλαξα σε hurricane.mp3 αφού στην 3η ερώτηση έβαλα ένα αρχείου ήχου μ’ αυτό το όνομα.

<object type=”application/x-shockwave-flash” data=”hbs_mp3_player2but_narrow_slider.swf” width=”150″ height=”20″ style=”vertical-align: middle;” >
<param name=”type” value=”application/x-shockwave-flash” />
<param name=”src” value=”hbs_mp3_player2but_narrow_slider.swf” />
<param name=”data” value=”hbs_mp3_player2but_narrow_slider.swf” />
<param name=”codebase” value=”hbs_mp3_player2but_narrow_slider.swf” />
<param name=”FlashVars” value=”TheSound=
hurricane.mp3” />
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”hbs_mp3_player2but_narrow_slider.swf” />
<param name=”loop” value=”false” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” /></object>

  • Μπορείτε να δείτε στην εικόνα πώς ακριβώς το έβαλα στην άσκηση του Hot Potatoes
    κλικ στην εικόνα για να μεγαλώσει
  • Τώρα δεν έχετε παρά να αποθηκεύσετε την άσκησή σας και έπειτα να δημιουργήσετε την αντίστοιχη ιστοσελίδα (html)
  • Δείτε ένα παράδειγμα που περιλαμβάνει και τα τρία χειριστήρια.
    Πατήστε το κουμπί <= της άσκησης για να επιστρέψετε σ’ αυτή τη σελίδα.

Παρατήρηση: Με τον ίδιο τρόπο μπορείτε να εισάγετε ήχους σε οποιοδήποτε σημείο επιθυμείτε, όπως στις οδηγίες, στα μηνύματα ανατροφοδότησης, στο βοηθητικό κείμενο, στους ορισμούς σταυρολέξων κλπ. – Για ειδικές περιπτώσεις θα ανεβάσω οδηγίες σε άλλα άρθρα …)