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

Version imprimable

25/12/2013, 12h53
Boomer30

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:)
26/12/2013, 00h55
Watilin

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.

:arrow: 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.

:arrow: 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 ».

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:

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:

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 :)

26/12/2013, 11h59
Boomer30

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.

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:

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

26/12/2013, 18h45
Invité

le lien est dans la page courante ?
26/12/2013, 18h55
Boomer30

Bonjour mekal

merci,

Oui le lien se trouve sur la page courante .

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:

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>

26/12/2013, 19h29
Boomer30

merci beaucoup pour ton aide :ccool:

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

:)
26/12/2013, 21h37
Boomer30

Bonsoir,

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

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 :ccool:

Voilà un forum super pro ! 8-);)