Fond sonore sur le forum.

[IriXa]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://outre-mer-le-forum.latchatche.net/

Description du problème

Bonjour,

Une petite question récurrente à vous soumettre. Le petit Jscript de musique que j'avais sur mon forum dans ma PA ne fonctionne plus.

Je l'avais enlevé et impossible de le faire fonctionner de nouveau. Je dois sûrement faire une fausse manip

J'ai cherché dans les tutoriels des scripts musiques mais aucun de ceux que j'ai testés ne fonctionne.

Quelqu'un aurait la disponibilité de m'aider sil vous plaît?
En vous remerciant d'avance

IriXa.

[Neptunia]

Bonjour ^^


Pourriez vous fournir le contenu du javascript ne fonctionnant plus ?

[IriXa]

Voici :

Code:

<span style="display: block; visibility: hidden;" id="player"><object style="width: 0px; height: 0px;"><param id="movie" value="http://www.youtube.com/v/4nl8Bc0Q2ag&autoplay=1&loop=1" /><param id="allowFullScreen" value="true" /><param id="allowscriptaccess" value="always" /><embed style="width: 0px; height: 0px;" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/4nl8Bc0Q2ag&autoplay=1&loop=1" /></object></span><span style="position: fixed; top: 5px; left: 5px;"><a onclick="document.getElementById('player').style.display == 'block'?document.getElementById('player').style.display = 'none':document.getElementById('player').style.display = 'block'"><img border="0" src="http://reviews.cnet.com/i/bto/20091212/SoundIcon.png" /></a></span>

[Neptunia]

J'ai une question bête !

Vos hauts parleurs sont ils allumés ?

Parce que chez moi ça fonctionne parfaitement en http comme en https (il est d'ailleurs toujours présent sur le forum de mon profil). En revanche le clic sur l'image du haut parleur semble inopérant.

[IriXa]

J'avais enlevé l'image du petit haut parleur (pour l'interface du site) dans le script.

Mais mon haut parleur pc est allumé oui.

[Neptunia]

Bah c'est exactement ce que j'ai fait, ajouter le code à la suite de ma page d'accueil.

D'où ma question de savoir si vos hauts parleurs sont branchés.

Cela fonctionne t'il pour vous sur mon forum ? (avant que je n'enlève le code)
Et attention ça ne fonctionnera pas depuis un téléphone ou une tablette où le lancement de la vidéo doit se faire manuellement (puisqu'ici c'est une vidéo et non un son)

[IriXa]

Sur votre forum cela ne fonctionne pas pour moi. J'ai actuellement le script dans ma PA avec haut parleur allumé et rien ne fonctionne.

Il n'y aurait pas un CSS a ajouter par hasard ?

[Neptunia]

Aucun css puisque ça fonctionne chez moi sans.

Chez vous par contre j'ai le haut parleur mais pas de son, il y a donc un problème de code.

En revanche si vous n'avez rien sur mon forum, il y a un autre problème sur votre ordinateur puisque sur le mien tout fonctionne normalement.

Vous pourriez essayer de virer (après sauvegarde) tout le code de votre page d'accueil pour ne remettre que le code du lecteur.

Ne pouvant pas reproduire le problème de mon côté, je ne pourrais pas vous aider davantage.

[IriXa]

Bonsoir,

J'ai enlevé tous les codes de la PA et replacé le script, comme vous me l'avez suggérée, il ne se passe toujours rien quand je fais "enregistrer".

( Donc je remets mes codes en place avec le script en dessous )

Merci quand même de votre aide

Quelqu'un d'autre pourrait m'aider svp?

IriXa.

[Le Grand Duc]

Bon, voila ce qu'on voit quand on appelle directement le lien https://www.youtube.com/v/4nl8Bc0Q2ag&autoplay=1&loop=1


je crois que votre problème vient de là.
Explications : YouTube donne le coup de grâce à Flash Player

Il va falloir mettre votre script à jour avec HTML 5.

[IriXa]

Bonsoir Le Grand Duc,

Merci de votre intervention, mais le HTML5 .... Pouvez-vous m'en dire plus s'il vous plaît ? Je dois le télécharger ?

Je ne pourrez plus mettre de lien youtoube sur mon site ?

Merci de m'éclaircir une peu plus sur le sujet, j'avoue que je n'y connais rien

IriXa.


Je viens de lire le lien, ben mince alors pffff mais sur d'autres sites cela fonctionne, pourquoi ?

[Le Grand Duc]

Vous n'avez rien à télécharger, HTML 5 est juste la dernière version du HTML et est supporté par tous les navigateurs de nos jours.
C'est juste qu'il y a d'autres moyens maintenant pour inclure des sons et des videos, il faut repenser votre petit module en fonction de cette nouvelle syntaxe.

[IriXa]

Hô ce serait sympa si vous repensez mon petit module script pour que je puisse de nouveau mettre un fond sonore sur mon site!!!

Je souhaiterai mettre celle-ci : https://www.youtube.com/watch?v=liTSRH4fix4
Ou ce genre de musique.

IriXa.

[Le Grand Duc]

Je ne l'ai jamais fait, mais je vais voir ce qu'on peut faire.
Le lien que vous donnez présente deux problèmes :
- il y a une pub qui dure près d'une minute au début,
- le son est désactivé au départ, l'utilisateur doit l'activer en cliquant.
Je crois qu'il vaudrait mieux trouver des fichiers ailleurs que chez Youtube, et ils pourraient sans doute fonctionner encore avec votre module actuel.

[oxymore]

Bonsoir

Vous pouvez utiliser l' API youtube

Essayez ce code en page d'accueil.

Code:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

 <style type="text/css">
 .material-icons {
    color: #ebe6df;
    font-size: 34px;
    cursor:pointer

  }
 </style>

<em class="material-icons" id="mute-toggle" style="position:fixed; left: 50px; top: 100px">volume_up</em> 
<div id="player">
</div>
 <script>   
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
 
      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '0',
          width: '0', 
          playerVars: {'playlist': '', 'autoplay': 1, 'controls': 1,'autohide':1,'loop':1,'wmode':'opaque' },
          videoId: 'liTSRH4fix4',
          events: {
            'onReady': onPlayerReady}
        });
      }
 
 

   
    function onPlayerReady() {
        event.target.play();
      }
   
    jQuery('#mute-toggle').on('click', function() {



    var mute_toggle = jQuery(this);
 
    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});
 
</script>

L'endroit ou ce trouve l'id de la vidéo ( si vous voulez changer)

Code:

 videoId: 'liTSRH4fix4',

Vous trouvez l'id de la vidéo c'est ce qui se trouve après v= dans le lien
https://www.youtube.com/watch?v=liTSRH4fix4

[IriXa]

Bonsoir oxymore,

Merci à vous, votre script fonctionne trés bien sur mon forum dans ma PA, mais pourriez-vous me dire comment cela se présente vers vous s'il vous plaît ? Vous voyez la vidéo ou pas? ou bien vous l'entendez à l'ouverture du forum? y a t-il des pubs qui s'affichent avant le vidéo en gros est-ce que c'est nikel ?

Il y a quand même un petit souci, mon texte au dessus ne défile plus et s'arrête au milieu de la page.
""**Recommandez-ce forum** Citation du jour etc ...."

Je crois qu'il vaudrait mieux trouver des fichiers ailleurs que chez Youtube, et ils pourraient sans doute fonctionner encore avec votre module actuel.

Pourrez-vous quand même me dire ou je pourrais éventuellement trouver des fichiers autres que sur youtube s'il vous plaît?

Merci de vos réponses importantes et enrichissantes pour moi.

Bonne soirée merci pour ce soir et à demain
IriXa.

[IriXa]

Bonjour, !
@oxymore finalement j'ai réussi à remettre en place le défilement du texte au dessus. Pour moi tout est nikel, mais je souhaiterais savoir si je peux changer de musique sans que n'apparaisse une pub comme précisé plus haut

- il y a une pub qui dure près d'une minute au début,

.

Voilà, c'était ma dernière question ( ou presque ) sur le sujet. Je ne mets pas en résolu car j'attends d'autres précisions de votre part si vous avez encore un petit temps à me consacrer s'il vous plaît

En tous cas, je vous remercie infiniment de votre aide à tous les deux.

Merci de votre retour.

IriXa

oxymore a été remercié(e) par l'auteur de ce sujet.

[Neptunia]

Au moins maintenant j'ai l'explication du pourquoi ça marchait chez moi.

Pour changer de musique, il suffit de changer de vidéo ou d'aller la chercher ailleurs.

Et s'il y a une pub sur un morceau qui m’intéresse vraiment, personnellement je vais pas me casser la tête.

Je télécharge la vidéo, voire uniquement sa piste son si c'est possible, je ré encode le son (uniquement la partie qui m’intéresse) au format mp3 (pour compatibilité maximale avec les navigateurs). J'héberge le tout et j'utilise la balise audio.
Je concède volontiers que ce n'est pas à la portée de tous. (un logiciel pour télécharger depuis dailymotion ou autre plateforme de streaming, un logiciel d'encodage vidéo ou audio selon le type de fichier que l'on récupère, un minimum de connaissance pour utiliser ces logiciels, ainsi que savoir où héberger ces fichiers mp3)

Le gros avantage est le temps de réponse. Au lieu de charger une vidéo de plusieurs mégaoctets, on ne charge que la piste son qui est bien plus légère. J'ai sur mon PC une vidéo de Dailymotion de basse qualité qui pèse 2.65 Mo pour 82 secondes. La piste son ne pèse que 657 ko

Code:

<audio type="audio/mp3" src="https://www.hebergeur.com/chemin/nomdefichier.mp3" autoplay>
<p class="alert">
Votre navigateur ne supporte pas le fond sonore ! Mettez-vous à jour !
</p>
</audio>

Le seul inconvénient est que ça ne fonctionne pas sur technologies immatures (tablettes, téléphones) où l'utilisateur doit débuter lui même la lecture (difficile quand aucun lecteur n'est affiché). Mais de toute façon le problème est le même avec Flash ou la balise vidéo.

[IriXa]

Bonjour Neptunia,
Merci de cette explication, mais pourriez-vous me dire si de votre côté tout est bon pour mon site s'il vous plaît ?

En vous remerciant par avance.

IriXa.

[Neptunia]

J'aurais préféré avec un sucre mais c'est l'intention qui compte

De mon côté tout fonctionne sur votre forum, démarrage automatique (au bout de 3 ou 4 secondes) et interrupteur marche/arrêt fonctionnel.

Et comme je le craignais, pas de son sur technologies non matures. Un interrupteur fonctionnel qui ne sert à rien puisque la vidéo ne se lance pas automatiquement.

[IriXa]

Oui je le sais, ce n'est pas si pas grave, je lavais déjà essayé sur ma tablette et Iphone pour voir le rendu, mais mes utilisateurs du forum se connectent plus avec le pc chez eux qu'avec d'autres moyens.

Ps : j'avais pris soin de vous sucrer le café avant et par souci d'esthétique je n'ai pas laissé l'emballage sur la soucoupe.

Merci et bonne journée à vous.
IriXa.

[oxymore]

Bonjour Irixa & Neptunia

J'ai un peu changé le code en mettant une lecture aléatoire ( c'est un peu " lourd " d'entendre toujours le même son.. )

Code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />  <style type="text/css">
 .material-icons {
    color: #ebe6df;
    font-size: 34px;
    cursor:pointer

  }
 </style> <em style="position:fixed; left: 50px; top: 100px" id="mute-toggle" class="material-icons">volume_up</em>
<div id="video">
</div>
 <script>
      var tag = document.createElement('script');
  tag.src = "//www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player,
        width = 1,
        height = 1,
 
   
        videoContainer = '<div id="video"></div>',
          videoStreams = ['9QgMeBqM6xg', 'crblDrrcunQ', 'uNRmUAdoAyk', 'xQwmgAlsxjk' ,'liTSRH4fix4 ']; // Id youtube vid

 
    Array.prototype.shuffle = function () {
        for (var i = this.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var tmp = this[i];
            this[i] = this[j];
            this[j] = tmp;
        }

        return this;
    };

    function randomVideo() {
        var stream = videoStreams.shuffle();
        return stream[0];
    };

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('video', {
          height: height,
          width: width,
   
    playerVars: { 'autoplay': 1, 'controls': 1, },
          videoId: randomVideo(),
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
    };

function onPlayerReady() {
        event.target.play();
      }
   
    jQuery('#mute-toggle').on('click', function() {



    var mute_toggle = jQuery(this);
 
    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});
 

    function onPlayerStateChange(event) {       
        if(event.data === 0) {           
            document.location.reload(true);
           
        }
 
    };
</script>

C'est dans cette partie du code que l'on met les id des vidéos youtube.

Code:

videoStreams = ['9QgMeBqM6xg', 'crblDrrcunQ', 'uNRmUAdoAyk', 'xQwmgAlsxjk' ,'liTSRH4fix4 ']; // Id youtube vid

@Neptunia ce n'est pas un soucis de technologie immature ,-) ,
mais une question de sécurité pour empêcher les téléchargements non souhaités sur les réseaux mobiles aux frais de l'utilisateur....

[Neptunia]

@oxymore Quand je parle de technologies immatures ce n'est pas spécialement une critique sur ce qu'elles savent faire ou non mais sur la jeunesse de la technologie.

Si on prend l'exemple de l'ordinateur personnel, selon les sources il faut attendre la fin des années 30 ou le début des années 40 pour que les premiers "ordinateurs" voient le jour. Et 1981 et l'IBM PC (et tous ses clones) pour que l'ordinateur devienne personnel. Soit 40 ans ! Et il a bien fallu attendre encore 10 ans de plus pour que la technologie devienne accessible. Et elle n'aura cessé d'évoluer jusqu'à grosso-modo la fin des années '2000. 50 ans pour arriver à maturité et 70 années de progrès constants.

Si on prend la téléphonie mobile, elle existe depuis 1927 mais il lui aura fallu environ 70 ans (fin des années '90) pour devenir accessible au grand public.

Si on prend l'informatique mobile, la technologie existe depuis guère plus de 10 ans et ne semble pas profiter des avancées de ses ancêtres (l'ordinateur et la téléphonie mobile) et au bout de 10 ans la technologie est moins abordable qu'à son lancement (il y avait les primes opérateur pour limiter le prix de revient).

Le problème c'est que maintenant les technologies ancestrales régressent. Ca devient de plus en plus difficile d'acheter neuf un téléphone mobile qui ne soit pas un téléphone "intelligent" et c'est tout simplement impossible d'en trouver un avec la même autonomie qu'il y a 5 ou 10 ans. Le téléphone mobile régresse en terme d'offre, en terme de prix mais surtout en termes de performances.
Pour l'ordinateur c'est pareil, depuis 4 ans les ventes baissent, les performances stagnent ou régressent, l'offre va donc baisser elle aussi. Il n'y a que les prix qui ne baissent plus.

Si encore c'était à l'avantage de l'informatique mobile, mais non elle aussi est en pleine régression non pas à cause d'un manque de maturité technique mais de l'immaturité des acteurs du marché (Apple, Samsung en tête) qui s'évertuent à faire des produits de moins en moins durables, de plus en plus fragiles et surtout non réparables.

Sur un autre sujet je me suis penchée sur la prise en charge des propriétés CSS en fonction des navigateurs. Je m'attendais à ce que les différences viennent des navigateurs alors qu'en fait ça vient avant tout du système d'exploitation. Ce que Chrome, Firefox ou Opera savent gérer sur un ordinateur ne savent plus le faire sous iOS ou Androïd et le décalage entre les deux plateformes (mobiles / ordinateurs) est de plusieurs années.

[oxymore]

Bonjour

@Neptunia j'expliquai surtout pourquoi autoplay ne fonctionne pas sur mobile et tablettes ..que ce soit sur technologies matures ou immatures, je ne pense pas que le soucis premier vienne de la
Après c'est un autre débat mais je ne pense pas que ce soit le bon endroit pour ça.

@IriXa

Pour que l'icone n'apparaisse pas sur la version mobile
Vous pouvez essayez ce code à placer dans gestion des codes javascript

Code:

$( document ).ready(function() {
              if ($(window).width()<450){
              $( ".material-icons" ).hide();}
                    });

*vous pouvez changer 450 qui correspond à la taille de la fenêtre.

[IriXa]

Bonsoir Oxymore,

J'ai un peu changé le code en mettant une lecture aléatoire ( c'est un peu " lourd " d'entendre toujours le même son.. )

Est-ce que je dois enlever le code que vous m'avez donné hier soir et remplacer par votre code du poste de 12h05 plus haut?

************************

De plus,
Je viens de placer le code dans un nouveau javascript, mais le petit haut parleur apparaît toujours sur l'interface du forum aussi bien sur ma tablette que sur mon mobile.

@IriXa

Pour que l'icone n'apparaisse pas sur la version mobile
Vous pouvez essayez ce code à placer dans gestion des codes javascript

Je n'ai sans doute pas très bien compris la manip

IriXa.

[oxymore]

Bonsoir IriXa

Est-ce que je dois enlever le code que vous m'avez donné hier soir et remplacer par votre code du poste de 12h05 plus haut?

Oui il faut le remplacer

De plus,
Je viens de placer le code dans un nouveau javascript, mais le petit haut parleur apparaît toujours sur l'interface du forum aussi bien sur ma tablette que sur mon mobile.

Vous pouvez le remettre en place dans gestion des codes javascript?



*Edit je viens de regarder sur votre forum et pour moi tout fonctionne le son et l'icone n’apparaît pas sur mobile.

[IriXa]

Alors, pour moi aussi c'est nikel maintenant.

Une dernière petite chose, dans votre script, dans cette ligne je peux sélectionner les morceaux de musique que je souhaite sur youtube, n'importe où, la quantité de morceaux que je souhaite et remplacer les morceaux que vous avez mis? ( bien entendu musique libre de droit et tombée dans le domaine public) - genre classique -

Code:

videoStreams = ['9QgMeBqM6xg', 'crblDrrcunQ', 'uNRmUAdoAyk', 'xQwmgAlsxjk' ,'liTSRH4fix4 ']; // Id youtube vid

IriXa.

[oxymore]

Bonsoir IriXa

Oui vous pouvez en ajouter

Code:

'9QgMeBqM6xg'

entre des guillemets simples et en séparant avec une virgule.
Vous n'êtes pas obligé d'utiliser des musiques libres de droits .
Le mieux est d'utiliser les vidéos des chaines officielles des artistes ou labels.

[IriXa]

Bonjour oxymore,

Je vous remercie infiniment pour cette aide précieuse. Je ne sais que dire de plus, tout fonctionne à merveille.

Je vous souhaite une bonne journée

IriXa.


oxymore a été remercié(e) par l'auteur de ce sujet.