サイトの右上に、小さなラジオを置きました。押すとプレイリストのどこかの曲が鳴り出して、そのままページを読みながら聴けます。
作っている間、迷ったのはほとんど「何を足すか」ではなく「何を後ろにずらすか」でした。
ブラウザに「勝手に鳴らすな」と断られる
ここで詰まりました。
ブラウザは、人が触っていないのに音が出るページが嫌いらしいです。これは正しい仕組みで、広告が突然しゃべり出す世界で過ごしたい人はいません。許されるのは「利用者が押した、その流れで鳴る音」だけです。
ところがこちらは、押された瞬間からプレイヤーを作り始めるわけです。プレイヤーが起きて返事をするまでに1秒ほどかかり、そのころには「押された」という事実が古くなっていて、再生の許可が下りない。押しても何も起きない、という一番わかりにくい壊れ方をしました。
やったことは2つです。埋め込みに allow="autoplay" を付けて、ページが受け取った許可をプレイヤー側へ引き継がせること。そしてそれでも鳴らなかったときに、表示を「press again」に変えること。
2つ目のほうが大事だと思っています。次に押されたときは確実に鳴ります。押した瞬間と再生の間に、もう何も挟まらないからです。ただ、黙って失敗すると、利用者には壊れているようにしか見えない。直せない事情があるなら、せめて次にどうすればいいかを画面に出す。 沈黙よりずっとましでした。
ラジオは頭から始まらない
プレイリストの1曲目から順に流す作りにはしませんでした。ラジオをつけたとき、番組はもう途中です。あの感じが欲しかったので、押すたびに全曲の中から適当な1曲を選んで、そこから始めます。
曲が終わったときも、隣の曲ではなく、また別の1曲へ飛びます。順番に聴きたい人のために送りと戻しのボタンも付けましたが、放っておけば最後までばらばらに鳴り続けます。 まあ個人のサイトにこんな物いるのかと聞かれたら何も言えない。
音量は30%から
初期値は、ずいぶん悩みました。 最初は100%でまじうるさかった
見た目は下のドックから借りました
新しい部品を足すたびに、サイトは少しずつ、知らない人の集まりみたいにになっていきます。
なのでラジオは、画面下のドックとまったく同じデザインで作りました。同じ丸い形、同じ細い仕切り線、同じ線画のアイコン、そして「カーソルが近づいたときだけ名前が開く」という同じ振る舞い。曲名は入りきらないときだけゆっくり左へ流れて、端で少し止まり、また戻ってきます。再生中はジャケットがそのままボタンの顔になります。
置き場所は違っても、同じ人が作ったものに見えてほしかったのです。
右上にあります。よければ一度、押してみてください。
今日の選曲はコチラ↓