みなさんは「SoundCloud(サンクラ)の曲を自分のサイトに埋め込みたいけど、わざわざサンクラ開いて埋め込みテキストコピーするのは面倒くさいなあ…」と思ったことはありませんか？きっとあるはずです

今回の目標は、例えば「https://soundcloud.com/zatuinu/tip-taps-paradehalcalitip-taps-tipfu-mou-featgreen-night-parade」と入力したら、以下のように埋め込みテキストを作成するプログラムを作ることです


手順としては、
①URLをスクレイピング
②曲のデータを整理
③埋め込みテキストに変換
という感じでやっていきたいと思います



PHPでスクレイピングをするためには、PHP Simple HTML DOM Parserを入れる必要があります
詳しい手順は【取得例16件】PHP Simple HTML DOM ParserでWebスクレイピング-Zennopen_in_newを参考にしてください

では、ここからPHPを書いていきたいと思います
サンクラはTwitterにリンクを貼ったときに、自動で埋め込みURLに変換され、以下のようになります


これは、サンクラがTwitterに貼られたときにこうなるよう対応したからです

なので、これを拝借しちゃいましょう

require_once "simple_html_dom.php";
function SoundCloud_2_Enbed($origin_url){
    $html = file_get_html($origin_url);
    $embed_url = trim($html->find('meta[property=twitter:player]', 0)->content);
    $maker_url = trim($html->find('meta[property=soundcloud:user]', 0)->content);
    foreach($html->find('title') as $row){
        $title = $row->plaintext;
    }
    $pattern = '/Stream (.*?) by (.*?) \|/';
    preg_match($pattern, $title, $matches);
    $songtitle = isset($matches[1]) ? $matches[1] : '';
    $songmaker = isset($matches[2]) ? $matches[2] : '';
}

これで、曲の埋め込みURL($embed_url)、タイトル($songtitle)、作者($songmaker)を取得できました
ただ、Twitterだけのパラメータがありそう(正直これらのパラメータが何を示すのか分からなかった)ので、パラメータを整理しておきます

// URLからtrackIDを抜き出す
$parsedUrl = parse_url($embed_url);
parse_str($parsedUrl['query'], $queryParams);
$urlParameter = urldecode($queryParams['url']);
$trackIdPart = substr($urlParameter, strpos($urlParameter, 'tracks/') + 7);

$parameters = [
    'url' => 'url=https%3A//api.soundcloud.com/tracks/'.$trackIdPart,
    'color' => '#ff5500',
    'auto_play' => 'false',
    'hide_related' => 'false',
    'show_comments' => 'true',
    'show_user' => 'true',
    'show_reposts' => 'false',
    'show_teaser' => 'true'
];
$parameter_string = http_build_query($parameters);

こうして得られたデータを文字列にすることで、埋め込む文字列ができあがります
※コードをそのまま表示するとそれもサンクラが反応してしまうので、一部全角になっています

$embed_text = "
＜iframe width='100%' height='166' scrolling='no' frameborder='no' allow='autoplay' src='https://w.soundcloud.com/player/?{$parameter_string}'＞＜/iframe＞
＜div style='font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;'＞
    ＜a href='{$maker_url}' title='{$songmaker}' target='_blank' style='color: #cccccc; text-decoration: none;'＞
       {$songmaker}
    ＜/a＞ · 
    ＜a href='{$origin_url}' title='{$songtitle}' target='_blank' style='color: #cccccc; text-decoration: none;'＞
        {$songtitle}
    ＜/a＞
＜/div＞";

$html->clear();
return $embed_text;

こうして、以下のように埋め込むことができました


改めてコードを全て載せておきます

<?php
require_once "simplehtmldom_1_9_1/simple_html_dom.php";
function SoundCloud_2_Enbed($origin_url){
    $html = file_get_html($origin_url);
    $embed_url = trim($html->find('meta[property=twitter:player]', 0)->content);
    $maker_url = trim($html->find('meta[property=soundcloud:user]', 0)->content);
    foreach($html->find('title') as $row){
        $title = $row->plaintext;
    }
    $pattern = '/Stream (.*?) by (.*?) \|/';
    preg_match($pattern, $title, $matches);
    $songtitle = isset($matches[1]) ? $matches[1] : '';
    $songmaker = isset($matches[2]) ? $matches[2] : '';

    // URLからtrackIDを抜き出す
    $parsedUrl = parse_url($embed_url);
    parse_str($parsedUrl['query'], $queryParams);
    $urlParameter = urldecode($queryParams['url']);
    $trackIdPart = substr($urlParameter, strpos($urlParameter, 'tracks/') + 7);

    $parameters = [
        'url' => 'url=https%3A//api.soundcloud.com/tracks/'.$trackIdPart,
        'color' => '#ff5500',
        'auto_play' => 'false',
        'hide_related' => 'false',
        'show_comments' => 'true',
        'show_user' => 'true',
        'show_reposts' => 'false',
        'show_teaser' => 'true'
    ];
    $parameter_string = http_build_query($parameters);
    $embed_text = "
        <iframe width='100%' height='166' scrolling='no' frameborder='no' allow='autoplay' src='https://w.soundcloud.com/player/?{$parameter_string}'></iframe>
        <div style='font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;'>
            <a href='{$maker_url}' title='{$songmaker}' target='_blank' style='color: #cccccc; text-decoration: none;'>
                {$songmaker}
            </a> · 
            <a href='{$origin_url}' title='{$songtitle}' target='_blank' style='color: #cccccc; text-decoration: none;'>
                {$songtitle}
            </a>
        </div>";

    $html->clear();
    return $embed_text;
}
?>

これで以上です みなさまお疲れ様でした

余談だけどサンクラって略し方なんか気持ち悪い気がする