ラズベリーパイでラジオのradikoを再生しよう！ の続きになります。
前回作成したindex.phpにcssデザインを施して見栄えよくしましょう。
スマホからアクセスするので、JQUERY MOBILEを使って
CSSデザインしてみました。
格好良くなりましたね。
index.phpで保存してください。
<?php
//Radiko Player
//http://www.nakatayuki.com
if(isset($_GET['id'])){
$id = $_GET['id'];
if($id=="stop"){
exec("killall mplayer");
}else if($id=="CCL"){
exec("killall mplayer");
exec("play_radiko.sh CCL", $e);
}else if($id=="802"){
exec("killall mplayer");
exec("play_radiko.sh 802", $e);
}else if($id=="ABC"){
exec("killall mplayer");
exec("play_radiko.sh ABC", $e);
}else if($id=="MBS"){
exec("killall mplayer");
exec("play_radiko.sh MBS", $e);
}else if($id=="OBC"){
exec("killall mplayer");
exec("play_radiko.sh OBC", $e);
}else if($id=="RN1"){
exec("killall mplayer");
exec("play_radiko.sh RN1", $e);
}else if($id=="RN2"){
exec("killall mplayer");
exec("play_radiko.sh RN2", $e);
}else if($id=="CRK"){
exec("killall mplayer");
exec("play_radiko.sh CRK", $e);
}else if($id=="KISSFMKOBE"){
exec("killall mplayer");
exec("play_radiko.sh KISSFMKOBE", $e);
}else if($id=="HOUSOU-DAIGAKU"){
exec("killall mplayer");
exec("play_radiko.sh HOUSOU-DAIGAKU", $e);
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Radiko Player</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
<style type="text/css">
<!--
#header, #footer {
background-color: #ffea00;
color: #493759;
}
-->
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" id="header">
<h1>Radiko Player</h1>
</div>
<div role="main" class="ui-content">
<!--リストを準備-->
<ul data-role="listview" data-inset="true">
<li><a href="index.php?id=stop">stop</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li><a href="index.php?id=802">FM 802</a></li>
<li><a href="index.php?id=CCL">FM COCOLO</a></li>
<li><a href="index.php?id=ABC">ABC Radio</a></li>
<li><a href="index.php?id=MBS">MBS Radio</a></li>
<li><a href="index.php?id=OBC">OBC Radio Osaka</a></li>
<li><a href="index.php?id=RN1">Radio NIKKEI 1</a></li>
<li><a href="index.php?id=RN2">Radio NIKKEI 2</a></li>
<li><a href="index.php?id=CRK">CRK Radio Kansai</a></li>
<li><a href="index.php?id=KISSFMKOBE" >Kiss FM KOBE</a></li>
<li><a href="index.php?id=HOUSOU-DAIGAKU" >HOUSOU DAIGAKU</a></li>
</ul>
</div>
<div data-role="footer" id="footer">
<h3><a href="http://www.nakatayuki.com/" >nakata yuki</a></h3>
</div>
</div>
</body>
</html>
コメント