オルタナティブ・ブログ > イメージ AndAlso ロジック >

ヴィジュアル、サウンド、テキスト、コードの間を彷徨いながら、感じたこと考えたことを綴ります。

長め視聴ページのJavaScriptを3行追加したら、ちょっと見やすくなった。

»

Windows 8 ネタで何か書くべきなのですが、まだインストールするマシンを設置できていないので、他の話を。

私のサイトは、その昔、いずれ出てくるであろう Windows Phone を見越してデザインしたため、440pxのブロックを並べた、左右に長いデザインになっています。

Wp7musicpage1

で、先日、iTunesストアで発売した音楽の、自サイト内長め試聴ページですが、曲の数が増えると、このブロックが増えて、横長~くなります。今回発売は3曲だからまだいいのですが、次回作は7曲入りの予定なので、とんでもなく横に長くなります。

曲名ボタンをタップすると、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>

これで、タップしたボタンのすぐ上にプレイヤーが表示されるようになります。

Wp7musicpage3

視聴ページを修正しました。au IS12T で見ると、こんな感じになります。
ちょっと便利になりました。

Wp7musicpage2

Windows 8 RTM 登場!!

MSDN サブスクリプションで Windows 8 RTM をダウンロード

Comment(0)

コメント

コメントを投稿する