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

JavaScript Discussion :

drag and drop d'un lien a href sur un lecteur audio html5


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 7
    Points : 1
    Points
    1
    Par défaut drag and drop d'un lien a href sur un lecteur audio html5
    Bonjour à tous et toutes,

    Je viens vers vous car je n'arrive pas à trouver une réponse à la question suivante.
    Est-il possible de glisser en drag and drop un lien a href pointant vers un fichier audio mp3 vers un lecteur audio de type html5 et que la lecture du fichier audio se fasse automatiquement?

    J'ai acheté plusieurs livre traitant javasscript et encore un dernièrement qui traite le drag and drop mais à chaque fois le sujet traité est un drag and drop d'un fichier audio en local vers le navigateur et ce n'est pas ce que je souhaite.

    Auriez vous une piste s'il vous plaît ça m'aiderait beaucoup.

    Je vous remercie par avance et vous souhaites de bonnes fêtes de fin d'année

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Salut ! Quelques p'tites pistes hésitantes. Je n'ai jamais sérieusement essayé l'élément <video> mais je pressens quels obstacles ça peut dresser sur la route du drag n'drop – par ailleurs très intéressant – que tu cherches à mettre en œuvre.

    D'abord, si tu utilises les contrôles par défaut, ils pourraient ne pas bien se comporter. Ce n'est qu'une hypothèse, mais je mets ça dans la même case que les éléments de formulaire qu'on arrive pas à styler comme on veut, parce qu'ils sont affichés par l'OS plutôt que par le navigateur.

    Donc à mon (très personnel) avis, il vaudrait mieux se faire ses propres contrôles avec des éléments HTML pas contrariants (<p>, <a>, <div> ou tout ce que tu veux) et leur faire manipuler la vidéo avec des gestionnaires d'évènements. Mais tout ça est à tester.


    Ensuite, il y a une chose à savoir à propos du drag n'drop : l'API HTML5 est atroce ! Il y a quinze mille comportements par défaut à annuler pour obtenir un début de quelque chose qui marche, c'est la misère. On n'a pas attendu HTML5 pour réussir à faire du drag n'drop, en passant par des classiques mousemove, mouseover et mouseout (ou mouseenter et mouseleave en trichant un peu). C'est peut-être un peu compliqué quand on n'a jamais fait ça, mais c'est sans surprises et largement documenté.

    Là où c'est dommage avec cette API mal fichue, c'est qu'elle permet par ailleurs de faire passer des méta-données dans le glissage-déposage (les dataTransfer), qui permettent de faire une interaction vraiment riche, du style « je glisse un fichier image depuis mon bureau vers ma page, et hop, mon appli JavaScript récupère l'image sans effort supplémentaire de ma part, et enchaîne en faisant quelque chose d'utile avec ».
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 7
    Points : 1
    Points
    1
    Par défaut
    Bonjour Watilin

    Merci beaucoup pour votre réponse.

    En effet j'ai pu remarqué qu'il fallait annuler beaucoup de chose pour que celà fonctionne.

    Donc dans un premier temps voilà ce que j'ai essayé de faire mais qui ne fonctionne pas

    le code partie html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="audioplayer">
    		<p>Glissez votre fichier son ici</p>
    </div>

    la partie javascript qui est censé gérer le drag and drop d'un lien a href va au fichier son mp3.

    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
    29
    30
    <script>
    //pointeur vers la zone 
     
    var oDropArea = document.getElementById('audioplayer');
    //écoute l'évènement 'dragover', exécuté très souvent
    //tant que l'utilisateur est au dessus de la zone
     
    oDropArea.ondragover = function(e) {
     
    console.log('droparea.ondragover');
    //il faut annuler cet événèment pour que le drop marche
    e.preventDefault();
    };
     
    //l'événement qui nous intéresse : le 'drop'
    oDropArea.ondrop = function( e ) {
     
    console.log('droparea.ondrop');
    //annulation du comportement du navigateur, qui veut afficher le fichier
    e.preventDefault();
     
    oDropArea.innerHTML = 'Fichier ajouté au lecteur audio';
    //on détecte si le navigateur sait accéder au fichier audio
     
    if('files' in e.dataTransfer ) {
    var audio = document.getElementById('audioplayer');
    var audio = new Audio();
     
    };
    </script>
    Donc à partir de là je suis perdu. Ce qui serait bien c'est que la lecture débute automatiquement, après pour les boutons pause, lecture et volume c'est une autre histoire mais si j'arrice au moin à comprendre cette partie ça sera vraiment super !

    d'avance merci

  4. #4
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 7
    Points : 1
    Points
    1
    Par défaut
    petite précision mes fichiers son s'affiche dans une liste de type ul li avec à l'intérieur un a href pointant vers le son que je souhaite lire avec mon lecteur audio.
    chaque son est réprésenté par une image.

    merci pour votre aide.

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 7
    Points : 1
    Points
    1
    Par défaut
    Bonjour,

    Quelques évolution dans mon code. la partie drag and drop semble fonctionner puisque il détecte bien le fichier que je glisse dans ma div "audioplayer" J'obtiens bien mon message de confirmation que le fichier fut ajouté "Fichier ajouté au lecteur audio".

    Le problème est que rien ne se passe la lecture du fichier audio ne fonctionne pas

    voici les changements effectuer:


    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
    29
    30
    31
    32
    33
    var oDropArea = document.getElementById('audioplayer');
    //écoute l'évènement 'dragover' tant que l'utilisateur est au dessus de la zone
     
    oDropArea.ondragover = function(e) {
     
    console.log('droparea.ondragover');
    //il faut annuler cet événèment pour que le drop marche
    e.preventDefault();
    };
     
    //l'événement 'drop'
    oDropArea.ondrop = function( e ) {
     
    console.log('droparea.ondrop');
    //annulation du comportement du navigateur, qui veut afficher le fichier
    e.preventDefault();
     
    oDropArea.innerHTML = 'Fichier ajouté au lecteur audio';
    //on détecte si le navigateur sait accéder aux fichiers
     
    if (file.type.match(/audio.*/)) {
    		var reader = new FileReader();
    		reader.onload = function(d) {
    			var e = document.createElement("audio");
    			e.src = d.target.result;
    			e.setAttribute("type", file.type);
    			e.setAttribute("controls", "controls");
    			e.setAttribute("autoplay", "true");
    			document.getElementById("audioplayer").appendChild(e);
    		};
    		reader.readAsDataURL(file);
    }
    }
    Sauriez- vous m'indiquer où est le problème s'il vous plaît ?

    merci

  6. #6
    Invité
    Invité(e)
    Par défaut
    le lien est dans la page courante ?

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 7
    Points : 1
    Points
    1
    Par défaut
    Bonjour mekal

    merci,

    Oui le lien se trouve sur la page courante .

  8. #8
    Invité
    Invité(e)
    Par défaut
    quand tu veut changer le son il faut uniquement modifié le src puis faire un load() pour rechager le nouveau son

    essai ce code qui fonctionne soit avec un lien soit avec un input

    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
     
    <!DOCTYPE html>
    <html>
    <head>
     
    <style type="text/css">
     
    .box{
    position:absolute;
    	background-color:gray;
    height:50px
    	margin-top:120px;
    	margin-left:600px;
    border:1px ridge #aaa;
    	-moz-box-shadow: 10px 10px 10px #212121;
    	-webkit-box-shadow: 10px 10px 10px #212121;
    	box-shadow: 10px 10px 10px #616161;
    }
     
     
    </style>
     
     
    <script type="text/javascript">
     
     
    function startDrag(e){
     
    	e.dataTransfer.effectAllowed = 'linkMove';
    	e.dataTransfer.dropEffect = 'move';
    }
     
    function dragenter(e){
     
    	e.stopPropagation();
    	e.preventDefault();
    }
     
    function drop(e) {
     
    	e.preventDefault();
     
    	var le_son=e.dataTransfer.getData('Text');
     
    	document.getElementById('mon_audio').getElementsByTagName('source')[0].src=le_son;
     
    	document.getElementById('mon_audio').load();
     
    	document.getElementById('mon_audio').play();
    }
     
    //--></script>
     
    </head>
     
    <body>
     
    <div id='dropbox' class='box' ondragenter="dragenter(event)" ondragover="dragenter(event)" ondrop='drop(event)';>
    <audio controls='controls id='mon_audio' >
     
    <source src="" type="audio/mpeg">
     
    </audio>
    </div>
     
    <a href="music.mp3" ondrag="startDrag(event)" ondragover="dragenter(event)">blabla</a>
     
    <input type='text' value='music.mp3' ondrag="startDrag(event)" ondragover="dragenter(event)"></input>
     
     
    </body>
    </html>

  9. #9
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 7
    Points : 1
    Points
    1
    Par défaut
    merci beaucoup pour ton aide

    Je regarde celà demain car j'en ai plein la tête....je fais une tite pause mais je reprend demain et je te tiendrai au courant en tous cas merci c'est sympa


  10. #10
    Nouveau Candidat au Club
    Homme Profil pro
    Inscrit en
    Décembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2013
    Messages : 7
    Points : 1
    Points
    1
    Par défaut
    Bonsoir,

    Bon après un cachet de 1g pour le mal de tête j'ai pas pu résister à la reprise du travail

    Bon après test et juste une tite correction de syntaxe c'est bien ce qu'il me fallait pour poursuivre la suite de mon travail merci mekal c'est top !

    Sujet résolu

    Voilà un forum super pro !

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

Discussions similaires

  1. Drag and drop "de l'extérieur"
    Par Invité dans le forum C++Builder
    Réponses: 12
    Dernier message: 31/03/2020, 11h10
  2. Réponses: 3
    Dernier message: 14/03/2011, 11h05
  3. [Prototype] Lien sur un drag and drop
    Par estampille dans le forum Bibliothèques & Frameworks
    Réponses: 4
    Dernier message: 21/08/2007, 11h15
  4. [JSP][DRAG AND DROP]
    Par hamed dans le forum Servlets/JSP
    Réponses: 7
    Dernier message: 23/01/2004, 18h36
  5. drag and drop
    Par jujuesteban dans le forum Composants VCL
    Réponses: 5
    Dernier message: 20/06/2003, 10h23

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