comment cliquer sur un mot pour l'entendre?Fermé

Question

Bonjour, 

Sur un site internet créé dans frontpage, Je veux faire parler les mots quand on clique dessus.

Je suis prof . Sur un petit site sans prétention, je mets les phrases des leçons à apprendre. quelqu'un s'enregistre. Je lie la phrase et le son en .wav et je voudrais que l'élève clique sur le mot et l'entende.

J'ai trouvé la balise gsound qui fait effectivement parler mes mots, mais ils sont dits en une seule fois à l'ouverture de la page tous en même temps. Ca ne va pas.

Votre aide me serait précieuse.

Merci

fred

Gihef · Answer

Bonjour,

Je ne connais pas cette balise.
Qu'est-ce que c'est ?
Où l'as-tu trouvée ?

Montre-nous la page.
Ou colle son code ici.
Ça nous simplifiera peut-être la tâche.



++
Plutôt que de créer un nouveau post lorsque tu veux apporter une précision, il suffit que tu ajoutes ça ici même (-;

--

fred · Answer

salut!

bgsound est une balise permettant de mettre un fond sonore sur une page web.
mais ça n'est pas ce qu'il me faut. Je cherche la balise équivalente à 'cliquer ici'.
Je veux qu'en cliquant sur le mot, on puisse l'entendre prononcé. J'ai lié mon fichier son au mot dans ma page.
Avec la balise bgsound src les mots sont entendus à l'ouverture de ma page.
J'ai lu qu'avec une balise embed, je pouvais spécifier ce dont j'ai besoin, seulement voila, Internet Explorer ne comprend pas cette balise.
Alors qu'est-ce qu'on dit dans IE pour faire produire un son dans une page quand on clique sur un mot?

Voila quand même le lien si ça t'intéresse.
du son sur son site grace a frontpage

Gihef · Answer

Ah oui ! “bgsound”.
Ce n'est pas répertorié comme étant du HTML.
Ça sert à créer un son de fond à la page.
J'aurais dû tilter (-;

Il faut donc t'y prendre autrement.
Je viens de trouver un Javascript (la page est sonorisée avec “bgsound”. Si tu l'entends sur IE alors…) que tu peux peut-être adapter pour chaque mot à prononcer.
Il utilise du .mid, avec un test sur IE.

Sinon, “object” peut peut-être répondre à tes besoins.

++
Tu n'as pas la possibilité d'installer Firefox, par exemple ?
Ce site propose la prononciation des mots.
À décortiquer… ?

--

PhP · Answer

Bonsoir

J'ai mis un ex de ce qu'on peut faire en utilisant un player Flash "piloté" depuis une page HTML en Javascript.

http://www.nobodysperfect.freesurf.fr/ccm/remote_player/remote.htm

Mon player est perfectible (ce n'est qu'un prototype) mais il est déjà opérationnel. 

Ici j'ai choisi des extraits musicaux au format MP3 mais tu peux bien sûr mettre autre chose comme ta voix.

fred · Answer

un énorme merci. Je ne peux pas tester tout ça ce soir, mais je m'en occupe
> en rentrant demain.
> 
> Merci, c'est sympa.
> 
> Je te tiens au courant.

fred · Answer

Merci, j'ai essayé, et si je ne me trompe pas, c'est parce que je ne peux pas le lire sous Internet Explrer que je n'entends pas.
Et je ne peux pas mettre des boutons marche et arrêt comme ça sur ma page. CA NE COLLE PAS AU NIVEAU FONCTIONNALITé; Mon projet est un peu particulier.

MERCI D'essayer

fred · Answer

Je n'ai pas du tout le niveau pour adapter ce que tu me proposes, hélas!

a demain

Gihef · Answer

On ne sait pas bien à qui tu réponds.
Ça peut se faire avec la petite icône “Répondre à…” juste en-dessous du numéro de l'intervention.


Ta question m'a intéressé. Ça m'a intrigué parce qu'on l'entend fonctionner chez wordreference.
Comment font-ils ?

Alors, j'ai regardé leur code et j'y ai trouvé “DHTMLSound()” que je ne connaissais pas.
Une petite recherche, et beyondfusion explique comment faire.

J'ai déjà eu l'occasion de le dire, je ne suis vraiment pas une bête en Javascript, mais je suis parvenu à en faire une adaptation. Même si je ne comprends pas trop comment ça marche (-;
Quid de l'utilité de “<span id="espaceson">” (je l'ai dit, j'ai adapté) ???
  Si quelqu'un connaît, je suis preneur.
C'est donc perfectible.

Je te propose de tester ça sur cette page où 4 sons différents sont mis en œuvre.
Par des images et par du texte.
Avec un clic plutôt qu'au survol par la souris.
Ces sons sont des .mp3. Dans l'exemple c'est un .wav. Ça ne semble pas poser de problèmes.
Chez moi, ça fonctionne avec les différents navigateurs que j'utilise. Le vieil IE5.2 lui-même accepte !


++
Si tu y es sensible, l'utilisation à répétition de “id="espaceson"” empêche d'obtenir un code valide W3C.

--

PhP · Answer

Re Gilhef Quid de l'utilité de ? En fait c'est simple : Dans ta librairie JavaScript overplay.js tu as le code suivant function DHTMLSound(surl) { document.getElementById('espaceson').innerHTML="

"; } JavaScript a la possibilité d'accèder aux différents éléments qui compose une page WEB en utilisant (parcourant) ce qu'on appelle DOM pour Document Object Model. En fait lorsque ton navigateur charge une page HTML, il créé en mémoire une arborescence dans laquelle il stocke tous les éléments qui constituent la page. C'est cet arbre qu'on appelle DOM. (heu je simplifie hein ?) document : ta page en mémoire le point d'entrée dans le model DOM En fait la racine de modèle DOM est l'objet window. Tu pourrais tout aussi bien écrire : window.document ce qui serait d'ailleurs plus juste. document tout court est juste un raccourcit vers window.document. héhéhé getElementById('espaceson') : recherche un élément dans le document portant l'identifiant ou id valant 'espaceson'. Tu comprends maintenant l'utilité du ? Cette fonction getElementById retourne un objet qui est l'élément span lui même : c'est un noeud dans l'arbre DOM innerHTML : cette propriété d'un objet permet de lire/d'écrire le code HTML contenu dans la balise. Ici l'objet est la balise span. A noter que lorsque tu modifies dynamiquement le contenu du code HTML comme c'est le cas ici le navigateur réinterprète le code. Ex : Jouer le son essai.wav lorsque tu cliques devient

dans la mémoire de l'ordinateur et donc aussi dans le modèle DOM. Le son est donc joué.

Gihef · Answer

Tu n'es pas nulle (enfin, je ne te connais pas (-; ). C'est juste un peu compliqué. D'abord, un rappel. n'est pas une balise HTML. Donc “” n'existe pas. À la rigueur, on pourrait comprendre “” pour avoir un son qui se déclenche à l'ouverture de la page. Et encore, c'est l'invention de quelqu'un d'indépendant que les navigateurs n'interprêtent pas tous (Safari par exemmple). Au passage, évite les espaces, accents dans les noms de tes fichiers. Bon, passons. Bloc-notes, vous avez ça dans les Accessoires, il me semble. C'est parfois utile. Pour prendre des notes, par exemple. Mais si FP permet de modifier le code à la main, alors fais-le comme ça. Surtout si tu n'as rien d'autre pour transférer les modifications. Essayons maintenant de te faire réaliser les modifications qui permettront peut-être aux élèves d'entendre des sons. Fais ça étape par étape. Suis bien. Au préalable, ce dont tu as besoin : • le fichier overplay.js que tu transfèreras dans le même dossier que la page http://www.saint-jo-clic.net/Menus/English/Menu/homework/_vti_cnf/MY%20SCHOOLBAG.htm • ce texte que tu inséreras dans l'en-tête de “MY%20SCHOOLBAG.htm”. Juste avant la balise C'est l'appel de la fonction qui est dans le fichier overplay.js et qui fait le travail. Ensuite, les modifications ponctuelles pour chaque image. Actuellement, tu as ça :

cartridgesIl faut que tu en fasses ça, exactement : cartouches de stylo

cartridgeset tu devras faire la même chose pour chaque image. En changeant, bien-sûr, le nom du fichier son correspondant. Tu peux tester ça ici. ++ Si tu enlevais ça : de la page d'accueil, ça serait un vrai bonheur. Et, “Sellotape”, tu en es sûre ? +++ Si tu mets en place cette technique, qu'elle convient, qu'elle fonctionne, j'aimerais bien qu'un lien vers le forum de CCM apparaisse quelque part sur la page, sur le site en guise de remerciement. Si le webmaster l'autorise.

PhP · Answer

Bonsoir Heu j'ai des temps de réponse excessivement longs avec les fichiers au format wav : de l'odre de 3 à 5" voir plus !!! Pourquoi alors là mystère ... De plus pour que les sons soient joués sous FireFox j'ai été obligé d'installer ... Quick Time Player ! Curieusement avec des mp3 à la place des wav ça fonctionne mieux (même si ça reste moins fluide qu'avec le player Flash) Exemple : Version balise embed http://www.nobodysperfect.freesurf.fr/ccm/school/myschoolbag.htm Version flash http://www.nobodysperfect.freesurf.fr/ccm/school/myschoolbag_flash.htm Nota : il est inutile de répéter la balise . Une seule suffit ! De toute façon getElementById retourne toujours la première balise portant cet ID. Je me suis permis de retoucher le code HTML . Hé oui Gihef j'ai utilisé un tableau ;-) Par contre j'ai pas testé la validité de la page ... Voilà

Gihef · Answer

Suite du <23> Et bien bravo. Beau boulot. Ça fonctionne. Il te reste quelques corrections à faire pour que les navigateurs soient plus à l'aise. Chaque ligne d'image est contenue dans un paragraphe qui commence par “

”. Il faut que tu refermes ces paragraphes (HTML fonctionne comme ça). Vérifie qu'avant chaque nouveau “

” le précedent est bien refermé par un “

” (4 caractères). Actuellement, tu as ça :

ajoute :

Ça devrait en plus espacer les lignes. Comme le précise PhP, un seul “” est nécessaire. N'en garde qu'un, le 1er par exemple, et supprime les autres. Et, j'insiste. Je (ne suis pas pédagogue, mais) persiste à penser que le “onMouseOver” n'est pas indiqué pour l'exercice. Balade ta souris au hasard sur la page. L'espèce de cacophonie qu'on obtient n'est pas du meilleur effet. Chez moi, lorsque je veux fermer la page, j'obtient 3 sons avant d'atteidre le bouton de fermeture… Par contre, un “onClick” réclame la participation du lecteur, lui donne quelque chose à faire. Il préfère en général un peu d'interactivité. Je ne sais faire fonctionner qu'une seule action à la fois. Il faudrait certainement écrire une nouvelle fonction en Javascript. Pour le texte, on adapte la même manière de faire. Je l'ai utilisé dans le premier exemple que je t'ai donné. Puisque tu as choisi de reprendre le code de mon 2e exemple, je te propose de continuer dans ce style (-; Tu as pu remarquer que cette page est différente de l'original. J'y ai créé des styles en CSS. Qu'on appelle dans

par exemple et dont le comportement est précisé dans l'en-tête de la page. Ici, un tout bête .justifie { text-align : justify; }Dans le code de la page, dans l'en-tête, entre “” et “” tu vas donc trouver un bloc délimité parC'est tout ce que j'ai ajouté pour préciser la mise en page. Tu vas y insérer à ton tour de quoi mettre en forme le texte qui se fera remarquer et qui déclenchera un son. Juste avant “”. Insère, par exemple : .dans_texte { padding : 0 2px; font-family: Georgia, serif; font-style : italic; color : #0b60cc; background-color : #e0e7ee; cursor : pointer; } Ensuite, tu limiteras à différents endroits choisis dans le texte l'action de ce style. Par exemple :… and typesetting industry. le texte correspondant à l'exemple sonore, when an unknown printer…Un “” permet ici de délimiter des zones de texte sur lesquelles on peut agir (class="dans_texte" + “onClick”) tout en restant en continu dans le paragraphe. Tu as remarqué qu'on l'ouvre “” et qu'on le referme “”pour indiquer aux navigateurs : “Ça commence ici et ça se termine là”. J'en ai ajouté un exemple dans cette page. À toi de trouver la mise en forme convenable. ++ Cette liste des propriétés CSS te permettra peut-être de trouver de quoi préciser tes styles. --

asterix · Answer

Bonjour à tous J'ai lu attentivement les messages. Je n'ai pas de son Pouvez vous m'aider?

le fichierasterix est l'image cascade le son mp3 et moi l'imbécile overplay.js contient function DHTMLSound(surl) { document.getElementById('espaceson').innerHTML="

"; } Pouvez vous me trouver l'erreur s'il vous plait Bonnes fetes

asterix · Answer

Merci Ghief de m'aider Mais je n'y comprends rien Je dois être bouché

overplay.js contient function DHTMLSound(surl) { document.getElementById('espaceson').innerHTML="

"; } S'il vous plait réécris moi mon exemple complétement . Bon réveillon

Gihef · Answer

Alors éclaircissons. Tu crées un avec un nomet tu fais référence à un autredocument.getElementById('espaceson')Les 2 doivent avoir le même nom. --

Comment cliquer sur un mot pour l'entendre?

15 réponses

Discussions similaires

Newsletters