選曲画面
再生中画面
音楽を聴く目的でYouTubeを時々利用するが、興味深い音楽ソースが沢山有る。
そこで、raspiをプレーヤーとして利用し、ブラウザからリモート再生できないかとネットで調べたら、丁度良さげなPHPサンプルプログラムが見つかり作ってみた。（画像表示無しで音楽再生のみ）
●必要なAPのインストール
$ cd $HOME
$ sudo pip3 install mps-youtube
$ sudo pip3 install youtube-dl
$ sudo apt-get install mpv
※プレーヤーAPは、参考サイトの"omxplayer"を導入せず"mpv"を使う事にした。
●下記方法で導入APの動作確認
1.「mps-youtube」(mpsyt)を起動する。
$ mpsyt
2.プレーヤーの設定
set player mpv
3.「/」に続けて検索key wordを入れて目的の音源を探す
/<検索key word> 例）/michael jackson
4. 一覧に該当音源を見つけたら、その左側の番号を入力する
●問題無く動作したので、ApacheとPHPを導入し、Apacheのユーザー"www-data"にsudo権限を設定してPHPのexec()で各種コマンドを実行できるようにした。また、参考サイトのPHPプログラムで使用している関数も追加導入した。
$ sudo visudo
※最終行に下記を追記
www-data ALL=(ALL) NOPASSWD: ALL
参考サイトのPHPプログラムで使用しているmb系関数の導入
$ sudo apt-get install php-mbstring
●各種導入が終わり、参考サイトから入手したPHPプログラムを使いブラウザからYouTube音楽再生できた。
ところが、暫くすると、下記の様なエラーとなり使用できなくなった。
Error 403 Daily Limit Exceeded. The quota will be reset at midnight Pacific Time (PT).
You may monitor your quota usage and adjust limits in the API Console:
https://console.developers.google.com/apis/api/translate/quotas?project=655912152876
ネットで調べると、どうやら、"mps-youtube"(mpsyt)を連続長時間利用するには、googleに登録して"API key"を取得する必要が有るようだ。しかし、そこまでするほど使用頻度が多い訳ではないので、mpsytを使わない方法を検討。
色々試したところ、事前に調べたYouTubeのContent IDを"mpv"で再生させる方法なら長時間使用してもエラーにならなかったので、お気に入りのContent IDを集めてリスト表示し、選択した音楽を"mpv"で再生させる方法に入手したPHPプログラムを大幅改造することにした。
●作成機能：
|
選曲画面 |
再生中画面 |
●事前にYouTubeで調べたContent IDのプレイリストをプログラムに組み込む
●プレイリスト (array('Content ID', 'Title', 'time')
$play_list = array(array('song',"YouTube Content ID : ",""), ←これはContent ID入力用
array('C2ELgd_8J9k',"The Best Of Soul, R&B, Smooth Jazz 2 - Denise King - PLAYaudio","1:50:07"),
array('KFH046IYwb4',"Manhattan Jazz Quartett - Vocal Jazz Classics","0:53:25"),
：
：
array('_sI_Ps7JSEk',"New York Jazz Lounge - Bar Jazz Classics","0:49:50"),
array('c9xtkAZSK50',"Motown Jazz - Smooth Jazz Music & Jazz Instrumental Music for Relaxing and Study | Soft Jazz","4:22:04")
);
●HTML内にプレイリスト作成
<?php
for ($i = 1; $i < count($play_list); $i++){
$value = $play_list[$i][0];
$title = $play_list[$i][1];
$ptime = $play_list[$i][2];
$att = $att_is[$i];
echo "<label>
<input type='radio' name='search_mode' value=$value $att >
$title ($ptime)
</label><br>";
}
?>
●Content IDの入力欄をHTML内に作成
●Content IDが未登録のものはYouTubeで調べたIDを入力して再生させる
<label>
<input type='radio' name='search_mode' value='song' <?php echo $att_is_song_mode;?> >
<?php echo _($play_list[0][1]); ?>
<input type='text' name='search' value='<?php echo $my_ytp->search_keyword; ?>' >
</label><br>
●USBオーディオ対応
●HTML内に選択チェックボックス
<div>
<label>
USB Audio :
<input type='checkbox' name="usb_audio" value="true" <?php echo $att_is_usb_audio; ?> >
<?php echo ("(USB Audio)"); ?>
</label>
</div>
●USB Audioチェックボックスの状態でmpvのオプションを変える
/* command setting with device switch USB Audio or jack speaker */
if ( $my_ytp->usb_audio == "true" ){
$my_ytp->path_mply = "/usr/bin/mpv --no-video --vo=null --audio-device='alsa/plughw:CARD=PCM2702,DEV=0' https://youtu.be/"; // use USB audio
}else{
$my_ytp->path_mply = "/usr/bin/mpv --no-video --vo=null --audio-device='auto' https://youtu.be/"; // use onboard audio jack
}
●YouTubeより再生ソースの情報を入手して表示
●"youtube-dl"コマンドで情報を得る
echo "【再生情報】<br><div style='font-size:12px;'>";
$command2 = "sudo youtube-dl --get-description https://youtu.be/";
if ($this->search_mode == "song"){
$command2 .= $this->search_keyword;
} else {
$command2 .= $this->search_mode;
}
$command2 = trim( $command2 );
exec($command2, $output, $return_var);
for($i = 0; $i < count($output) ; $i++){
echo "$output[$i]<br>";
}
echo "</div>";
●おおよその再生経過時間の表示
●音楽ソースの再生時間データをjavascriptに設定して、1秒毎にカウントする
---PHP内---
if( $this->search_mode == "song"){
exec("sudo youtube-dl -e --get-duration https://youtu.be/".$this->search_keyword,$output,$return_var);
$title = $output[0]; ←Content ID指定の場合はYouTubeから時間情報を得る
if(substr_count($output[1],":") < 2)
$play_time = "00:".$output[1];
else
$play_time = $output[1];
}else{
foreach($this->play_list as $ply){
if($ply[0] == $this->search_mode){
$title=$ply[1];
$play_time=$ply[2]; ←プレイリスト指定の場合はプレイリストから時間取得
break;
}
}
}
echo ("
【再生】<br><span class='ptitle'>{$title}</span> ($play_time)<br>
<p>再生時間：<span id='PlayTime1' class='ptime'>Play time</span> --
-- 残り時間：<span id='PlayTime2' class='ptime'>Play time</span></p>
<script type='text/javascript'>
playTime('$play_time');
interval = setInterval('countDown()',1000); ←1秒毎にカウント処理
</script>
");
●javascriptで再生時間のカウントを行う
<script type="text/javascript">
var interval;
var tm_delay = 8; ←実際の音楽再生開始が遅いのでカウント開始タイミングの調整
var ptime_a = new Date("2020/01/01 0:00:00"); ←カウントアップ用（年月日は関係ないが適当な値が必要）
var ptime_b = "";
function playTime(time) {
ptime_b = new Date("2020/01/01 " + time); ←カウントダウン用（年月日は関係ないが適当な値が必要）
}
function countDown() {
if (tm_delay > 0) tm_delay--;
else{
ptime_a.setSeconds(ptime_a.getSeconds() + 1);
ptime_b.setSeconds(ptime_b.getSeconds() - 1);
}
var date_a = ptime_a.toLocaleString();
var date_b = ptime_b.toLocaleString();
if (ptime_b.getDate() != 1){
clearInterval(interval);
document.getElementById("PlayTime2").innerHTML = "終了";
window.location.href = "?status=stop";
}else{
document.getElementById("PlayTime1").innerHTML = date_a.split(' ')[1];
document.getElementById("PlayTime2").innerHTML = date_b.split(' ')[1];
}
}
</script>
【参考】