長め視聴ページのJavaScriptを３行追加したら、ちょっと見やすくなった。
Windows 8 ネタで何か書くべきなのですが、まだインストールするマシンを設置できていないので、他の話を。
私のサイトは、その昔、いずれ出てくるであろう Windows Phone を見越してデザインしたため、440pxのブロックを並べた、左右に長いデザインになっています。
で、先日、iTunesストアで発売した音楽の、自サイト内長め試聴ページですが、曲の数が増えると、このブロックが増えて、横長～くなります。今回発売は３曲だからまだいいのですが、次回作は７曲入りの予定なので、とんでもなく横に長くなります。
曲名ボタンをタップすると、HTML 5 Audio のプレイヤーが表示されるようになっていますが、このプレイヤーを常にボタン近くに表示しなければ、左右フリックの手間がハンパないです。
で、JavaScriptを3行追加しました（青の部分）。こんな感じ（必要部分だけ抜き出して加工してます）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Viewport" content="width=480, user-scalable=yes" />
<title>Audio Player</title>
<style>
button
{
CSS略
}
</style>
<script type="text/javascript">
function play(track)
{
var myAudio = document.getElementById('audio1');
myAudio.volume = 0.7;
var myMpegURI = track.getAttribute("value");
var myNo = track.getAttribute("id");
var myleft = 100 + 500 * (myNo -1) + "px";
myAudio.style.marginLeft = myleft;
myAudio.src = myMpegURI;
myAudio.play();
}
</script>
</head>
<body>
<audio id="audio1" style="width:400px;position:absolute;margin-top:40px;" height="30%" controls="true" />
<button id="1" onClick="play(this)" value="GraduationFromLife_WebTrial.mp3" style="position:absolute;margin-left:100px;margin-top:100px;">Play "人生の卒業"</button>
<button id="2" onClick="play(this)" value="ChangeTheBrain_WebTrial.mp3" style="position:absolute;margin-left:600px;margin-top:100px;">Play "Change The Brain"</button>
<button id="3" onClick="play(this)" value="DontCryMama_WebTrial.mp3" style="position:absolute;margin-left:1100px;margin-top:100px;">Play "Don't Cry, Mama"</button>
</body>
</html>
これで、タップしたボタンのすぐ上にプレイヤーが表示されるようになります。
視聴ページを修正しました。au IS12T で見ると、こんな感じになります。
ちょっと便利になりました。
Windows 8 RTM 登場！！