Ιούλ 22 2008
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 με χειριστήριο
ΟΔΗΓΙΕΣ
Τι θα χρειαστείτε:
|
|
|
|
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>
2ο Χειριστήριο
- Ανοίξτε τώρα το αρχείο hbs_mp3player3but.txt (πρέπει να είναι στον φάκελο zip που κατεβάσατε και αποσυμπιέσατε προηγουμένως)
- Στο αρχείο αυτό περιλαμβάνεται ο κώδικας για την εισαγωγή ενός χειριστηρίου τριών κουμπιών της μορφής [Δημιουργός του είναι ο 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>
3ο Χειριστήριο
- Ανοίξτε τώρα το αρχείο hbs_mp3_player2but_narrow_slider.txt (πρέπει να είναι στον φάκελο zip που κατεβάσατε και αποσυμπιέσατε προηγουμένως)
- Στο αρχείο αυτό περιλαμβάνεται ο κώδικας για την εισαγωγή ενός χειριστηρίου τριών κουμπιών της μορφής [Δημιουργός του είναι ο 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>
- Τώρα δεν έχετε παρά να αποθηκεύσετε την άσκησή σας και έπειτα να δημιουργήσετε την αντίστοιχη ιστοσελίδα (html)
- Δείτε ένα παράδειγμα που περιλαμβάνει και τα τρία χειριστήρια.
Πατήστε το κουμπί <= της άσκησης για να επιστρέψετε σ’ αυτή τη σελίδα.
Παρατήρηση: Με τον ίδιο τρόπο μπορείτε να εισάγετε ήχους σε οποιοδήποτε σημείο επιθυμείτε, όπως στις οδηγίες, στα μηνύματα ανατροφοδότησης, στο βοηθητικό κείμενο, στους ορισμούς σταυρολέξων κλπ. – Για ειδικές περιπτώσεις θα ανεβάσω οδηγίες σε άλλα άρθρα …)
Aλίκη
10 Μαρτίου 2010 @ 14:39
Σας ευχαριστώ για την πολύτιμη βοήθειά σας,και πιστεύω στο μέλλον αν σας χρειαστώ να σας έχω πολύτιμο σύμβουλο.
Ευχαριστώ!!!
Γιάννης
7 Μαρτίου 2011 @ 20:29
Γιάννη, θέλω να βάλω ήχο στην ανατροφοδότηση. Είπες ότι θα γράψεις σχετικό άρθρο. Έγραψες κάτι και δε το βρίσκω;
Προσπάθησα να βάλω μέσα από την “εισαγωγή πολυμέσων”, αλλά δε δούλεψε, παρόλο που αποθήκευσα τα αρχεία στον ίδιο φάκελο, ακολούθησα όλες τις οδηγίες κτλ.
Αν μπορείς να γράψεις κάτι, θα μου κάνεις πολύ μεγάλη χάρη.
Ευχαριστώ
Γιάννης
admin
7 Μαρτίου 2011 @ 21:04
Για εξήγησέ μου, πού ακριβώς θέλεις να ακούγεται ήχος; Στο αναδυόμενο παράθυρο που λέει π.χ. Μπράβο, τα κατάφερες; Να παίζει αυτόματα ή να έχει κουμπί;
Γιάννης
8 Μαρτίου 2011 @ 21:29
Στο αναδυόμενο παράθυρο και να παίζει αυτόματα
admin
9 Μαρτίου 2011 @ 17:28
Λοιπόν, στην πράξη αυτό δε δουλεύει πάντα, αφού εξαρτάται από τους εγκατεστημένους codecs ήχου του χρήστη.
Αλλά γίνεται ως εξής:
1. Πας στις Επιλογές > Διαμόρφωση Επιλογών στην καρτέλα Ανατροφοδότηση > Σωστή πρόβλεψη.
2. Σβήνεις ότι γράφει μέσα και από το οριζόντιο μενού πας Εισαγωγή > Πολυμέσα
Στο μεταξύ αποθηκεύεις το αρχείο ήχου στην ίδια θέση με το αρχείο html της άσκησης
3. Πατάς Αναζήτηση, βρίσκεις το αρχείο ήχου και επιλέγεις έναν player (π.χ. Προσθήκη Windows Media Player ή κάποιον άλλον), ξετσεκάρεις την επιλογή να περιληφθεί απλός σύνδεσμος.
4. Αν τα αφήσεις όλα έτσι τότε με τη λήξη της άσκησης θα βγει ένα χειριστήριο όπου ο χρήστης θα πατάει για να ακούσει τον ήχο. Αυτό δεν το θέλουμε (είπαμε αυτόματα…)
5. Ψάχνεις μέσα στον κώδικα που προστέθηκε στο πεδίο “Σωστή πρόβλεψη” και βρίσκεις τα παρακάτω σημεία…
param name=”autoplay” value=”true” (δηλαδή να παίζει αυτόματα)
param name=”controller” value=”false” (δηλαδή να μην εμφανίζεται το χειριστήριο ήχου)
Αποθηκεύεις κλπ.
Όμως… είναι πολύ πιθανό κάποιος που θα κάνει την άσκηση να μην έχει τον player που επέλεξες οπότε δεν θα ακούει τίποτα.
Γι’ αυτό καλό ειναι να πας στην αρχή του κώδικα του ήχου στο πεδίο “Σωστή πρόβλεψη” και να προσθέσεις στην αρχή ένα μήνυμα π.χ. Μπράβο, τα κατάφερες!
Έτσι θα εμφανίζεται ένα μήνυμα και ίσως ακούγεται και ο ήχος…
Αυτά …
Γιάννης
9 Μαρτίου 2011 @ 19:41
Ευχαριστώ πολύ για την απάντηση.
Ευάγγελος
1 Μαρτίου 2012 @ 01:06
καλησπέρα Γιάννη
οι οδηγίες ήταν όχι μόνο σωστές μα σωτήριες. ¨εχω καταφέρει να εισάγω ήχο δοκιμάζοντας με τρεις διαφορετικούς “παίκτες” με επιτυχία και να το ακούσω στο δικό μου υπολογιστή. Το πρόβλημα που αντιμετωπίζω εμφανίζεται όταν μεταφέρω σε στικάκι τη διεύθυνση html και προσπαθώ να την ανοίξω ή όταν τη στέλνω ως συνημμένο με μειλ ακόμη και σε μένα. Σώζω το αρχείο, το ανοίγω αλλά δεν παίζει κανένας από τους παίκτες. Κάπου χάνεται το μονοπάτι. Το μπορώ να κάνω;
ευχαριστώ
Ευάγγελος
admin
1 Μαρτίου 2012 @ 09:28
Αυτό συμβαίνει διότι δεν μεταφέρεις αντίστοιχα και το αρχείο ήχου. Επομένως όταν προσπαθείς να το παίξεις σε άλλη διεύθυνση ο κώδικας της σελίδας html ψάχνει το αρχείο ήχου στον ΗΥ του σπιτιού σου.
Γενικά μια καλή τακτική είναι να δημιουργείς έναν φάκελο που θα περιέχει όλα τα σχετικά αρχεία (html, hotpotatoes, εικόνες, ήχοι, βίντεο κλπ) και να μεταφέρεις το φάκελο κι όχι μόνο τη σελίδα html που περιέχει την άσκηση.
Ευάγγελος
2 Μαρτίου 2012 @ 10:46
καλημέρα Γιάννη σε ευχαριστώ πολύ
Πράγματι δούλεψε τώρα που τα έστειλα σε μένα με μειλ.
Πρέπει να κάνω το ίδιο φαντάζομαι κι όταν θα τα στείλω στους μαθητές μου!
Εάν ανεβάσω την άσκηση σε μπλογκ θα πρέπει να υπάρχει και το αρχείο ήχου σε κάποιο φάκελο αντίστοιχα, ναι;
Έτσι τα έχεις ανεβάσει κι εσύ στην ιστοσελίδα εδώ;
Τέλος αν κάνω εγγραφή στο σαιτ των πατατών πρέπει να ακολουθήσω την αυτή διαδικασία όταν ανεβάζω ασκήσεις που περιέχουν αρχεία ήχου ή εικόνας απ τον υπολογιστή μου;
Ελπίζω να είναι σαφείς οι ερωτήσεις μου.
καλό Σαββατοκύριακο
admin
3 Μαρτίου 2012 @ 00:07
Απάντησες σε όλες τις ερωτήσεις!
Ευάγγελος
3 Μαρτίου 2012 @ 02:42
επανέρχομαι Γιάννη με ένα τεράστιο γιατί
λοιπόν,βγάζω και τα τρία αρχεία (html, mp3, sequitur) με μεταφορά, ή και με αντιγραφή, από το φάκελο όπου τα έχω αποθηκεύσει. Ανοίγω ξανά την άσκηση αλλά ο ήχος τώρα είναι ανενεργός, ούτε το χειριστήριο δεν εμφανίζεται. Τα επιστρέφω ξανά στον αρχικό φάκελο και ξανανοίγω…παίζει κανονικά και μαζί τα νεύρα μου. Το πρωί λειτούργησε αλλά τώρα δεν . Τα έστειλα με μειλ σε άλλον και πάλι δε δουλεύει.
…Ευτυχώς απάντησα τρομάρα μου.
Ευάγγελος
3 Μαρτίου 2012 @ 02:50
είχα την ιδέα να αντιγράψω όλο το φάκελο και να τον μεταφ΄ρω σε στικάκι. Τώρα δουλεύει όταν ανοίγω. Όμως δεν μπορώ να στείλω όλο το φάκελο γιατί περιέχει κι άλλα αρχεία πατατών. Ονόμασα άλλο φάκελο με το ίδιο όνομα και πήρα ξεχωριστά πάλι τα αρχεία αλλά έτσι όταν ανοίγω δε δουλεύει. Φοβερή εξάρτηση …
Ευάγγελος
3 Μαρτίου 2012 @ 02:59
μπίγκο θέλει μαζί στο φάκελο το swf αρχείο του χειριστηρίου κι όχι την άσκηση του sequitur τώρα κατάλαβα και σε ευχαριστώ για την ανοχή σου