Intégrer une musique de SoundCloud en BBcode

[Mat]

Bonjour ^^,
je voudrais savoir comment je pourrais faire pour intégrer une musique de Soundcloud en BBcode sur mon forum ^^
J'ai trouvé ce topic ^^:
https://forum.forumactif.com/t342479-code-pour-integrer-lecteur-soundcloud
Mais ce n'était pas possible à l'époque
Je voudrais savoir aussi comment faire pour ajouter un bouton intégrer une musique Soundcloud avec un bouton comme le bouton "insérer un code"
Merci d'avance ^^

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Walt]

Bonjour,

La réponse n'a pas changé, vous ne pouvez pas intégrer vous même de nouveau BBcode, l'unique moyen étant un script remplaçant des balises par le code HTML. Mais la difficulté est que le lien du lecteur n'est pas le lien de la page de lecture sur le site Soundcloud.

Par exemple, si vous créez et activez ce JS sur toutes vos pages :

Code:

$(function() {
  var pattern = /\[soundcloud\](.*?)\[\/soundcloud\]/g;
  var replacement = '<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/$1&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>';
 
  $(window).bind("load", function() {
    setTimeout(function() {
      $("div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : "")).each(function() {
          pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
      });
    }, 600)
  })
});

Il est possible de poster un lecteur en insérant dans un message ceci :

Code:

[soundcloud]310583525[/soundcloud]

310583525 correspond ici à la piste jouée. Pour obtenir l'id d'une piste jouée, c'est un peu compliquée ce qui ne rend pas très pratique ce BBcode :

Voici en tout cas le rendu :

Cordialement,
Walt

[Mat]

Merci ça marche
Je n'ai plus qu'a réduire la taille de base du lecteur

[Mat]

Merci pour la réouverture du sujet
Et désolé donc pour le up
Mais ça ne fonctionne pas sur la version mobile

[Walt]

Remplacez le script précédent par :

Code:

$(function() {
  var pattern = /\[soundcloud\](.*?)\[\/soundcloud\]/g;
  var replacement = '<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/$1&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>';
 
  $(window).bind("load", function() {
    setTimeout(function() {
      $("#mpage-body-modern .post-content, div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : "")).each(function() {
          pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
      });
    }, 600)
  })
});

Cordialement,
Walt

[Mat]

Remplacez le script précédent par :

Code:

$(function() {
  var pattern = /\[soundcloud\](.*?)\[\/soundcloud\]/g;
  var replacement = '<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/$1&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>';
 
  $(window).bind("load", function() {
    setTimeout(function() {
      $("#mpage-body-modern .post-content, div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : "")).each(function() {
          pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
      });
    }, 600)
  })
});

Cordialement,
Walt

Merci
Ca marche
Je laisse le topic ouvert pendant 3 heures pour voir si je n'ai plus de questions

[Mat]

C'est possible d'ajouter un bouton à l'éditeur de message ?
Un bouton dans le genre de celui de Youtube
On clique dessus on insère le lien de la musique de SounCloud
Et puis c'est bon

[Walt]

On clique dessus on insère le lien de la musique de SounCloud

Oui c'est possible mais il faudra indiquer le lien de la musique sur l'API de SoundCloud, si vous indiquez le lien d'une musique directement (ex : https://soundcloud.com/a-boogie-wit-da-hoodie/drowning-feat-kodak-black-1 ) ça ne fonctionnera pas. On est d'accords ?

[Mat]

On clique dessus on insère le lien de la musique de SounCloud

Oui c'est possible mais il faudra indiquer le lien de la musique sur l'API de SoundCloud, si vous indiquez le lien d'une musique directement (ex : https://soundcloud.com/a-boogie-wit-da-hoodie/drowning-feat-kodak-black-1 ) ça ne fonctionnera pas. On est d'accords ?

Oui, merci je regarde ça tout à l'heure

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

On clique dessus on insère le lien de la musique de SounCloud

Oui c'est possible mais il faudra indiquer le lien de la musique sur l'API de SoundCloud, si vous indiquez le lien d'une musique directement (ex : https://soundcloud.com/a-boogie-wit-da-hoodie/drowning-feat-kodak-black-1 ) ça ne fonctionnera pas. On est d'accords ?

Et un up

[Walt]

Bonjour,

Ca a été un peu plus long que prévu puisqu'au final je trouvais qu'il était peu pratique de devoir utiliser l'URL de la piste audio dans son format API, donc j'ai prévu les deux cas.

Il est donc possible d'insérer une URL sous la forme API (ex : https://api.soundcloud.com/tracks/310583525 ) ou sous la forme courante (ex : https://soundcloud.com/a-boogie-wit-da-hoodie/drowning-feat-kodak-black-1 ).
Dans le premier cas, le script insère l'ID de la piste contenue dans l'URL, dans le second cas il va chercher l'ID via l'API de Soundcloud.
Dans les deux cas, le BBcode précédemment créé est inséré dans l'éditeur. Si l'URL est vide ou si l'URL n'est pas une adresse Soundcloud, le script affiche une alerte.

Et voici le script :

Code:

$(document).ready(function() {
  $(function() {
    $("#text_editor_textarea").length && window.localStorage && "Microsoft Internet Explorer" != navigator.appName && ($('.sceditor-button-youtube').before('<a class="sceditor-button" unselectable="on" title="Soundcloud" id="soundcloud_button"><div unselectable="on" style="background-image:url(http://i.imgur.com/589Zbbu.png)">Soundcloud</div></a>'), $("#soundcloud_button").click(function(a) {
      a.stopPropagation();
     
      if( $("#soundcloudp").css('display') != 'block' ) {
        $('#soundcloudp').remove();
        $('<div class="soundcloud-bloc sceditor-dropdown" id="soundcloudp" style="display:none"><div><div unselectable="on"><label for="soundcloudurl" unselectable="on">URL</label> <input id="soundcloudurl" class="url" placeholder="https://" value="" type="text"></div><div unselectable="on"><input value="Insérer" id="soundcloudButton" class="button" type="button"></div></div></div>').appendTo("body").css({top:$('#soundcloud_button').offset().top,left:$('#soundcloud_button').offset().left,marginTop: $('#soundcloud_button').outerHeight(),position:'absolute'});
        $("#soundcloudp").toggle();
      } else {
        $('#soundcloudp').remove();
      }
     
      $('#soundcloudurl').val('');
     
      $('#soundcloudButton').click(function(a) {
        a.stopPropagation();
        if( $('#soundcloudurl').val() != "" &&  $('#soundcloudurl').val().search('soundcloud.com') != '-1') {
          if( $('#soundcloudurl').val().search('api.soundcloud.com/tracks/') == '-1') {
            $.ajax({
              url: "https://soundcloud.com/oembed",
              type: 'GET',
              data: {
                format: 'js',
                url: $('#soundcloudurl').val(),
                iframe: 'true',
              },
              dataType: "jsonp",
            }).done(function(data){
              var htmlResult = data.html;
              $('#text_editor_textarea').sceditor('instance').insertText( '[soundcloud]' + htmlResult.replace('<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=', '').replace('http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F', '').replace('https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F', '').replace(/&show_artwork=true&callback=jQuery[0-9]+/, '').replace(/_[0-9]+/, '').replace(/&_=[0-9]+/, '').replace('"></iframe>', '')+ '[/soundcloud]' );
              $("#soundcloudp").toggle();
            });
          } else {
            $('#text_editor_textarea').sceditor('instance').insertText( '[soundcloud]' + $('#soundcloudurl').val().replace('https://api.soundcloud.com/tracks/','') + '[/soundcloud]' );
            $("#soundcloudp").toggle();
          }
         } else {
          alert('Vous devez insérer une URL Soundcloud valide.');
        }
      });
    }))
  });
});

Et voici le rendu (les couleurs sont altérées par la compression mais là n'est pas l'important) :



Cordialement,
Walt

[Mat]

Un très grand merci Walt  
C'est exactement ce que je cherchais
Ca fonctionne parfaitement en plus
Merci d'avoir prit le temps de créer ce code

EDIT : Par contre, je sais que je suis embêtant :p, mais c'est possible de l'ajouter aussi à l'éditeur "nouveau topic' ?
Merci d'avance
Et désolé de vous embêter

[Walt]

Il y est déjà, si vous avez coché paramétré correctement l'apparition du script :



Cordialement,
Walt

[Mat]

Il y est déjà, si vous avez coché paramétré correctement l'apparition du script :



Cordialement,
Walt

Oups
Un grand merci alors