SoundCloudのプレイヤーをAMPページに対応させる方法

優先順位的に後回しにしていたんですが、ようやく自作テーマの「4536」でSoundCloud（サウンドクラウド）の埋め込みプレイヤーをAMPページでも使えるようにしました。

専用のライブラリを読み込んだり、amp-soundcloudという専用のタグに変換したりと、手間がかかると思っていたんですが意外と簡単でした。

今回はそのコードを公開するので、ぜひ参考にしていただければと思います。

ちなみに、WordPressメインのカスタマイズですが、正規表現の部分はPHPなので他のCMSなどでも使えるはずです。

AMP化させるコード

以下のコードをfunctions.phpにコピペします。

 function convert_soundcloud_to_amp($the_content) {
 if(!is_amp()) return $the_content; // AMPページじゃない場合は処理中止
//正規表現開始
 $pattern = '/<iframe.+?src="https:\/\/w.soundcloud.com\/player\/\?url=https%3A\/\/api.soundcloud.com\/(tracks|playlists)\/(\d+)&.*?height="(\d+)".*?><\/iframe>/is';
 $append = '<amp-soundcloud data-$1id="$2" height="$3" layout="fixed-height" data-visual="true"></amp-soundcloud>'; 
 if(preg_match($pattern,$the_content,$matches) === 1) $the_content = preg_replace($pattern, $append, $the_content);
 $the_content = str_replace('<amp-soundcloud data-tracksid', '<amp-soundcloud data-trackid', $the_content);
 $the_content = str_replace('<amp-soundcloud data-playlistsid', '<amp-soundcloud data-playlistid', $the_content);
//正規表現終了
 return $the_content;
}
add_filter('the_content','convert_soundcloud_to_amp', 999999999);

重要なのはコメントで囲っている部分ですね。

ここでSoundCloudのコードを検索して置換しています。

プレイリスト（複数の曲をまとめたプレイヤー）かトラック（1曲だけ）かを判別しているので、多くを望まなければこれで十分かと。

AMPページかどうかの判別にis_ampというテーマ側で定義した関数を使っていますが、独自の関数を使っている場合は変更してください。じゃないとエラーになります。

何の関数を使っているかわからない場合は、AMPページかどうかチェックする方法を別記事で紹介しているので一度チェックしてみると良いかもしれません。

PHP（WordPress）でAMP対応ページかどうか判別する方法。 Fantastech!! もっと見る

ライブラリの読み込み

後は、専用のライブラリをheadタグ内に読み込んで終了です。

コードはこちら。

<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>

現状の仕様だとSoundCloudのプレイヤーを埋め込んでいないページで読み込んでもエラーにならないので条件分岐は不要です。

デモ

デモを用意してみました。

※PCページからアクセスしている場合は画面幅をスマホ用にしてこちらから確認してみてください。

トラック

プレイリスト

以上、参考にしていただければ嬉しいです:)