5568 sujets

Sémantique web et HTML

Désactiver menu contextuel <audio>

Bonjour,

Je suis en pleine réflexion quant au futur développement du site de mon groupe de musique. Je cherchais le moyen le plus accessible et efficace de faire écouter notre musique aux internautes.

Je me suis d'abord pencher sur dewplayer qui représentait pour moi un lecteur léger et simple à mettre en place tout en garantissant une certaine protection du contenu. Et puis je suis tombé sur la balise <audio> de HTML5 qui m'a l'air tout aussi efficace et pratique à mettre en place. Mon problème et que je viens de constater qu'un menu contextuel au lecteur a été mis à disposition de l'utilisateur et lui permet entre autre d'enregistrer le fichier. De plus, l'emplacement du fichier sera très visible dans le code source... Donc cela pose un gros problème pour nous et je voudrais savoir s'il n'y a pas une solution pour éviter le téléchargement du contenu... ?

Merci d'avance ! Smiley cligne
Bonjour,

Tu peux éventuellement faire une interface toute scriptée pour l'élément AUDIO. HTML5 propose une API JavaScript complète pour ça. Bon, du coup c'est plus tout simple à mettre en place. Smiley lol
(Il y a aussi des scripts JS relativement bien fichus qui proposent un lecteur HTML5/JavaScript plus ou moins personnalisable + un fallback avec un lecteur Flash.)

Dans tous les cas si tu veux mettre des restrictions à l'accès aux fichiers (qui seront nécessairement imparfaites), ça demande des compétences en développement un peu spécifiques. Je te conseillerais alors plutôt d'utiliser un service bien fichu tel que Bandcamp (disclaimer: j'ai pas d'actions chez eux et j'ai pas testé non plus sauf comme utilisateur final).

Faire son propre site de zicos à la main quand la principale alternative est MySpace, c'est normal. Mais quand il y a des alternatives sympa (à première vue...) comme Bandcamp, c'est plus forcément pertinent.
Modifié par fvsch (28 Jun 2011 - 17:05)
En fait j'ai réussi à bloquer l'accès direct aux fichiers grâce à .htaccess, en vérifiant le HTTP_REFERER.


Options -Indexes

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://www.astin.fr/test_player.html [NC]
SECONDE CONDITION
RewriteRule ^music/(.+)$ - [F]


Le problème, c'est qu'à travers le menu contextuel, en enregistrant le fichier, le referer est le même que lorsqu'on le lit. Il me faudrait donc trouver une seconde condition, qui permette de faire la différence entre l'action de lire le fichier, et l'action de l'enregistrer. J'ai essayé plusieurs trucs (ports, savoir si c'est une sous requête, le head de la requête, le type de la requête...), infructueusement bien évidemment...

N'y-a-t-il aucun moyen de différencier ces deux actions côté serveur ? Smiley sweatdrop

PS : Jamais entendu parler de BandCamp avant aujourd'hui... Et au contraire, le fait d'avoir un site (bien foutu évidemment) de la forme www.legroupe.fr est d'après moi un gage de professionnalisme et de présence sur notre incontournable web.
Modifié par vever (28 Jun 2011 - 18:51)
vever a écrit :
Et au contraire, le fait d'avoir un site (bien foutu évidemment) de la forme www.legroupe.fr est d'après moi un gage de professionnalisme et de présence sur notre incontournable web.

Déjà, plutôt "legroupe.fr" que "www.legroupe.fr", ne soyons pas has been d'emblée. </troll>

Moi le professionnalisme je veux bien. Avoir son propre nom de domaine et communiquer dessus pour ne pas être excessivement dépendant des MySpace, Facebook et autres prestataires dont on est plus souvent le produit que le client, j'approuve. Par contre, en ce qui concerne les solutions techniques utilisées, je suis pas sûr que le DIY jusqu'au-boutiste soit de mise.

En ce qui concerne le nom de domaine et dans une certaine mesure l'environnement graphique, Bandcamp (et sans doute d'autres services relativement bien fichus) permettent d'utiliser son propre domaine ou sous-domaine:
http://bandcamp.com/faq_custom_domains

Moi je dis ça, je dis rien... Smiley smile
Modifié par fvsch (29 Jun 2011 - 14:05)
La présence sur Facebook est une nécessité incontestable. La présence sur MySpace l'était aussi, jusqu'à ce que MySpace devienne tout simplement IN-GE-RABLE.

Concernant bandcamp, je le répète, je ne connais pas et de toute façon la question ne se pose plus puisque le nom de domaine a déjà été acheté par notre association donc le site sera bel et bien développé (et je m'en réjouis car ça m'intéresse beaucoup !).

Concernant le problème posé au départ, à savoir désactiver le menu contextuel, et pour ceux que çà intéresserait, j'ai plus ou moins contourné le problème en désactivant les contrôles du tag <audio> (il n'est alors plus visible) et en recréant totalement l'interface que je peaufinerai ces prochains jours. Les avantages sont multiples :
- plus de menu contextuel donc plus de possibilité d' "Enregistrer sous" d'un simple clic droit
- le titre défile dans la barre de progression
- la gestion d'une playlist automatique est possible grâce à un fichier XML.
- j'ajouterai sûrement d'autres fonctionnalités

Voilà, je vous proposerai mon travail d'ici peu, le temps pour moi de le finaliser.

Merci à bientôt ! Smiley cligne

PS : Pas compris l'expression "DIY jusqu'au-boutiste"...
vever a écrit :
Pas compris l'expression &quot;DIY jusqu'au-boutiste&quot;...


Vouloir tout faire soi même à tout prix.

DIY = Do It Yourself. C'est du langage SMS de djeunz. Smiley cligne
Modifié par jb_gfx (30 Jun 2011 - 01:12)
Ah ok merci ! Ben disons que quand le "Yourself" est très motivé pour "Do It", je ne vois pas où est le problème Smiley cligne
vever a écrit :
le nom de domaine a déjà été acheté par notre association donc le site sera bel et bien développé

Un nom de domaine, ou un sous-domaine, tu le fais pointer vers ce que tu veux. Tu peux le faire pointer vers un blog hébergé par Tumblr ou WordPress, par exemple. Il suffit que le service d'édition (de blog, de site pour musicien, de ce qu'on veut) propose comme option (gratuite ou payante) l'utilisation d'un nom de domaine personnalisé.

Je ne dis pas que c'est ce qu'il faut faire, je me contente de rappeler (en triple parce que ça rentre pas Smiley cligne ) que c'est une possibilité technique d'une part, et souvent une approche pertinente d'autre part quand on choisit bien les outils et services utilisés.

Bien sûr si tu te sens capable de réaliser les choses toi-même et que tu as envie d'y passer du temps, c'est très bien.

vever a écrit :
Concernant le problème posé au départ, à savoir désactiver le menu contextuel, et pour ceux que çà intéresserait, j'ai plus ou moins contourné le problème en désactivant les contrôles du tag <audio> (il n'est alors plus visible) et en recréant totalement l'interface

Yep, c'est la solution que j'évoquais dans ma première réponse.
En passant, il y a Sound Manager 2 qui a l'air pas mal.

vever a écrit :
Pas compris l'expression "DIY jusqu'au-boutiste"...

Do it yourself, c'est une expression popularisée aux États-Unis dans les années 1950, bien avant l'invention des SMS. Elle a été récupérée plus récemment par les mouvements punk et indé.
vever a écrit :
Ben disons que quand le "Yourself" est très motivé pour "Do It", je ne vois pas où est le problème Smiley cligne

Les trois quarts des questions techniques sur ce forum (et encore, je suis gentil) sont posées par des personnes qui souhaitent un résultat donné mais qui n'ont pas les compétences pour y arriver, et pas spécialement l'envie de se former intensivement aux technos web. Donc quand il existe des solutions prêtes à l'emploi, je me permet de les signaler. Smiley cligne
Il me semblait bien que tu m'avais catégorisé "non-informaticien". Je te rassure je suis BAC+3 dans le domaine du développement (grosse préférence pour le web d'ailleurs) Smiley cligne

Au passage mes travaux avancent bien, je vous les présente très prochainement.
Voilà grosso modo terminé !

Un petit player sous la forme d'une machine à écrire !

http://astin.fr/player.html

Le dossier contenant les fichiers son n'est pas protégé mais il le sera dans un avenir proche.

Testé sous Firefox et Chrome sans souci. Pas encore de fallback flash par contre, et à vrai dire je ne sais pas comment je vais pouvoir faire car je n'aurai aucun moyen de cacher le graphisme de la machine à écrire en cas d'échec de lecture du fichier... à moins que je fasse un test sur le navigateur mais bon.

N'hésitez pas à livrer vos impressions, et à me dire si çà marche sur les versions compatibles HTML5 d'IE. Smiley cligne
vever a écrit :
à moins que je fasse un test sur le navigateur

Plutôt un test de la fonctionnalité (et pour compléter de la capacité du navigateur à lire le format audio utilisé). C'est relativement simple je crois. Tu peux créer un élément AUDIO en JavaScript sans même l'attacher au DOM, et faire quelques tests:
var myPlayer = document.createElement('audio');
var audioSupported = myPlayer.canPlayType('audio/ogg');
if (audioSupported != '') {
  // On initialise le lecteur et son interface
}
(Bon là c'est très quick and dirty, code qui balance des variables dans l'espace de nom global, tests pas forcément state of the art, etc.)

Une autre possibilité c'est de fournir des sources Ogg Vorbis et MP3 (donc deux éléments SOURCE comme enfant de l'élément AUDIO), ou bien seulement l'une ou l'autre après avoir testé chacun des deux types de média av

vever a écrit :
N'hésitez pas à livrer vos impressions

En test ça marche plutôt bien (pas vérifié sur IE9). Remarques:
- L'interface est sympa, mais je changerais au moins le style strike-through des pistes sélectionnées, ça donne vraiment pas la bonne information à l'utilisateur (moi j'interprète plutôt ça comme «la piste n'est pas disponible», pas «la piste est sélectionnée»). Il te faut un état «piste sélectionnée mais pas lancée ou en pause» et un état «piste sélectionnée + en cours de lecture», je pense.
- La navigation au clavier marche, ce qui est une bonne chose. Il te manque un ou deux styles spécifiques au focus pour que ça soit tout à fait ça.

Sur le code, j'ai pas analysé le détail mais à vue de nez c'est un code spécifique à ta base de code HTML (demande une structure HTML complète assez précise), et peut-être au style graphique que tu as choisi. Tu pollues pas mal l'espace de nom global. J'essaierais au moins de mettre tout ça dans une syntaxe de module JS. Si tu veux faire du zèle, tu peux commencer à réfléchir pour refactoriser ton code et l'organiser comme une mini-lib qui ne place qu'un seul identifiant dans l'espace de nom global (un objet avec quelques méthodes accessibles) et que tu peux initialiser en lui passant des paramètres tels que l'identifiant du conteneur dans lequel créer un lecteur à la volée, les titres et URL (plus ou moins complètes/masquées) de tes pistes, etc.

Pour les tests du support de AUDIO, on peut aussi voir dans le code source de Modernizr comment ils procèdent.
Modifié par fvsch (01 Jul 2011 - 12:28)
Merci pour tes impressions !

Alors, pour le "nettoyage" du code c'était prévu bien sûr. Pour l'instant c'est limite dégueulasse...
Concernant la mise à disposition de deux source, c'est déjà le cas, d'ailleurs dans le fichier playlist2.xml, pour chaque piste, tu as une balise <files> où se trouvent les chemins de l'OGG et du MP3. J'ai regardé les compatibilités des navigateurs et en théorie, avec ces deux formats, on couvre l'ensemble de ces derniers.

Concernant le line-through, je trouvais çà plus dans le style machine à écrire et ancêtre du SUR-lignage, mais effectivement, si la compréhension des utilisateurs ne suit pas où qu'elle gêne l'information, je reviendrai dessus.

Merci pour ta remarque sur la navigation au clavier car je n'y avais même pas penser !
Quelqu'un saurait-il comment accéder à la propriété de l'état de chargement d'un fichier en JavaScript ? Smiley sweatdrop
Peut-être voir du côté de File API et de fileReader.readyState, mais je connais mal et suis pas sûr que ça serve à ça.
Aucune propriété simple d'accès, à l'instar de document.getElementById("mon_player").currentTime ?
Après de laborieuses et longues recherches j'ai enfin trouvé ce que je cherchais. Smiley langue

Le ratio de chargement d'un fichier se fait de la manière suivante :
var chargement = document.getElementById("mon_player").buffered.end(0)/document.getElementById("mon_player").duration


L'appel de la méthode permettant l'évolution de la progressbar de chargement peut se faire dans l'élément <audio> lui même au moyen de l’événement "onprogress".

Super intéressant HTML5 mais encore trop peu documenté pour le moment... Smiley smile


NB : Pas de problème sous Chrome, en revanche sous Firefox, j'ai du rajouter un setTimeout qui rappelle toute les secondes la méthode permettant l'évolution de la progressbar, afin qu'elle aille jusqu'au bout, je ne sais pas pourquoi...
Modifié par vever (06 Jul 2011 - 12:17)
Sujet clos
Aller à