IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Lire un fichier wav en jquery


Sujet :

jQuery

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut Lire un fichier wav en jquery
    Bonjour

    Je voudrais lire un fichier audio sur un appli web en jquery mobile
    Avec ce code, je n'ai pas de son
    Mes fonctions :
    <script type="text/javascript">
    f
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    unction liresound (soundFile) { 
     document.all.sound.src=soundFile; 
    } 
    //-->
    <!--
    function arretsound (soundFile) { 
     document.all.sound.src=""; 
    } 
    </script>
    Mon html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <td>
    <bgsound id="sound" src="">
    <input type="button" id="liresound" onClick="liresound('texte1.wav');" value="Lire"/>
    <input type="button" id="arretsound" onClick="arretsound();" value="Stop"/>
    </td>
    J'aurais voulu également integrer un <audio controls>
    Est-ce possible ?
    Merci pour vos réponses
    PAPI

  2. #2
    Membre éclairé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2011
    Messages
    411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2011
    Messages : 411
    Points : 735
    Points
    735
    Par défaut
    Sans utiliser de HTML5 et la balise audio, c'est possible :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="button" id="liresound" onClick="liresound('texte1.wav');" value="Lire"/>
    <input type="button" id="arretsound" onClick="arretsound();" value="Stop"/>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script type="text/javascript">
    var audio;
    function liresound (soundFile) { 
     audio = new Audio(soundFile);
     audio.play();
    } 
    function arretsound () { 
     if(audio != undefined)
       audio.stop(); // audio.pause();
     //audio = null;
    } 
    </script>
    Je suis fervent utilisateur de PHP et de jQuery.
    Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web de développeur web dans le Val d'Oise mais aussi plusieurs projets personnels.
    Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, une extension de navigateur pour envoyer l'URL de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc…

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.all.sound.src=soundFile;
    Oh non...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Merci pour ta réponse
    Mais je n'ai pas de son
    J'accede à mon site par l'intermédiaire de mon iPhone
    et pour ce faire j'ai converti le fichier wav en mp4

    Pas de son, tu vois pourquoi ?
    PAPI

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Bovino je ne comprend pas ton code
    PAPI

  6. #6
    Membre chevronné
    Avatar de gwinyam
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 162
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 162
    Points : 2 015
    Points
    2 015
    Par défaut
    C'est ton code qu'il ne fait que citer pourtant. Regarde ta fonction liresound() de ton premier message.

    Il précise "oh non" et pleure pour la raison suivante : document.all est une antiquité ambulante à bannir au plus vite (si ce n'est immédiatement) de tes habitudes.

    document.all a été remplacé en 1998 par document.getElementById(). D'ailleurs cette propriété n'existait que pour servir originellement IE 4 et IE 5 qui en avait besoin parce qu'à l'époque getElementById() n'était pas encore un standard W3C. Les navigateurs comme Chrome/Firefox/Opera/Safari ne l'exécutent que pour des raisons de rétro-compatibilité mais comme dans tous langages, travailler avec des éléments "deprecated" n'est pas une bonne idée
    (surtout quand l'élément a été déprécié en 1998)
    Comparez la qualité et le prix du matériel de bricolage ou de maison avant d'acheter : MatosMaison
    Le bouton ne masse pas les pieds, mais ça aide la communauté.

  7. #7
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    gwinyam cela veut dire que le code de Shikiryu n'est pas nécessaire ?

    Et qu'avec ce code corrigé comme tu me l'indiques je peux acceder à mon site par l'intermédiaire de mon iPhone (avec le fichier wav converti en mp4)
    PAPI

  8. #8
    Membre chevronné
    Avatar de gwinyam
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 162
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 162
    Points : 2 015
    Points
    2 015
    Par défaut
    Peut-être j'en sais rien, je n'ai pas testé. Mais de ce que je lis, si tu suis la méthode de Shikiryu à priori ça devrait marcher. Depuis ton iPhone par contre je ne garantis rien. Loin de moi tout troll (même si ça me démange), je ne sais pas ce qu'assure à minima l'iPhone mais je suppose qu'ils ont évité d'implémenter les standards antérieurs à 1998 propres à Microsoft.

    D'ailleurs correctif : les navigateurs modernes, au moins Chrome et Firefox 4 ne supporte pas document.all
    Comparez la qualité et le prix du matériel de bricolage ou de maison avant d'acheter : MatosMaison
    Le bouton ne masse pas les pieds, mais ça aide la communauté.

  9. #9
    Membre éclairé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2011
    Messages
    411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2011
    Messages : 411
    Points : 735
    Points
    735
    Par défaut
    Essaye ça sous ton navigateur (de ton PC / Mac, pas du portable) :

    http://jsfiddle.net/WLrW8/3/

    Chez moi ça fonctionne (firefox 6) - Il peut y avoir un temps d'attente (il doit télécharger le .wav, il n'est pas gros, mais mon serveur, c'est pas une fusée )

    Puis, essaye sur ton iphone, et dis nous s'il y a une différence.
    Je suis fervent utilisateur de PHP et de jQuery.
    Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web de développeur web dans le Val d'Oise mais aussi plusieurs projets personnels.
    Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, une extension de navigateur pour envoyer l'URL de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc…

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Sur mon PC (IE8) avec ce code j'ai une page blanche

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="button" id="liresound" value="Lire"/>
    <input type="button" id="arretsound" value="Stop"/>
    PAPI

  11. #11
    Membre éclairé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2011
    Messages
    411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2011
    Messages : 411
    Points : 735
    Points
    735
    Par défaut
    Tous les navigateurs <= IE8 n'ont pas le moteur javascript adéquat pour comprendre l'objet Audio, donc ce code ne fonctionnera pas sous ces navigateurs.

    Néanmoins, la page http://jsfiddle.net/WLrW8/3/ ayant ces inputs s'affiche bien, seule l'activation du son ne fonctionnera pas (et lancera une erreur javascript si tu as la console js qui va bien).

    Ce code fonctionnera sur tous les autres navigateurs en version récente et, comme c'est apparemment le cas, "devrait" fonctionner sur les smartphones (vu qu'ils "devraient" avoir un moteur javascript récent). Loin de moi l'idée de troller mais, je n'ai aucune idée de la politique de apple là dessus au niveau des iphones (d'où ma demande de tester ma page jsfiddle).
    Je suis fervent utilisateur de PHP et de jQuery.
    Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web de développeur web dans le Val d'Oise mais aussi plusieurs projets personnels.
    Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, une extension de navigateur pour envoyer l'URL de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc…

  12. #12
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Sur mon iPhone je n'est pas de son non plus
    PAPI

  13. #13
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Sur mon PC avec Safari
    la page s'affiche correctement mais je n'ai pas de son
    PAPI

  14. #14
    Invité
    Invité(e)
    Par défaut
    franchement utiliser jQuery pour une simple balise audio c'est comme utiliser jquery pour afficher une simple image

    un iphone utilise safari qui reconnais les fichier mp3

  15. #15
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Alors tu me proposes quoi pour régler ce problème
    PAPI

  16. #16
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Je suis surpris mekal de ton commentaire.
    Il me semblait que justement Jquery mobile était spécialement approprié pour développer des sites web pour mobiles.
    Je me trompe ?
    PAPI

  17. #17
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Shikiryu je ne comprends pas quand je teste ton lien sur mon PC et sur mon iPhone j'ai bien le son.
    Si j'intègre ce code sur mon site avec un fichier wav ou mp3 ou mp4 je n'ai pas de son
    PAPI

  18. #18
    Membre éclairé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2011
    Messages
    411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2011
    Messages : 411
    Points : 735
    Points
    735
    Par défaut
    Je croyais qu'il ne fonctionnait pas sur iPhone... Faut savoir

    Le fichier wav de mon exemple provient d'un fichier mp3 convertit en wav via ce service : http://media.io/

    Ce son ne dure qu'une seconde et quelques mais pèsent déjà 43ko. Si tu fais la même chose mais avec un temps de 30s, tu vas avoir un bon gros temps de latence entre le clic et la lecture... à moins que tu ne fasses tout en local...
    Je suis fervent utilisateur de PHP et de jQuery.
    Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web de développeur web dans le Val d'Oise mais aussi plusieurs projets personnels.
    Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, une extension de navigateur pour envoyer l'URL de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc…

  19. #19
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    367
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 367
    Points : 101
    Points
    101
    Par défaut
    Non c'est parce que j'avais intégré ce code dans mon site et non testé ce lien
    Mon fichier fait 2mn08
    PAPI

  20. #20
    Invité
    Invité(e)
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
     
    <html>
    <head>
    <script type="text/javascript">
     
    function marchearret(lui){
    if(document.getElementById('monplayer').paused==true){
    document.getElementById('monplayer').play()
    lui.value="arret"
      }
    else{
    document.getElementById('monplayer').pause()
    lui.value="marche"
      }
    }
    </script>
     
    </body>
    </html>
    		<audio controls="controls" id="monplayer">
    <source src="mon_fichier.ogg" type="audio/ogg">
    <source src="mon_fichier.mp3" type="audio/mp3">
    </audio>
    <br>
    <input type=button value='marche' onclick='marchearret(this)'/>
    	</body>
    </html>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. problème pour lire un fichier wav
    Par r0d dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 03/05/2007, 19h56
  2. [debutant] Lire un fichier .wav
    Par r0d dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 22/02/2006, 09h42
  3. Lire un fichier wav
    Par fabnet dans le forum Bibliothèques
    Réponses: 4
    Dernier message: 14/09/2005, 20h23
  4. Lire un fichier WAV
    Par benib8 dans le forum Langage
    Réponses: 1
    Dernier message: 31/08/2005, 12h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo