A CodePen by furugomu. みりあジュークボックス - みりあちゃんが喋ります。Safari や Google Chrome などで動作します。

index.html

<h1 id=title>みりあジュークボックス</h1>

<p>Chrome や Safari で動作します。<p>
<div id="e">
<img src="http://125.6.169.35/idolmaster/image_sp/card/l/0793eaf891f21d96424137f2fb375650.jpg" alt="" width=320>
</div>
<div id="serifu">&nbsp;</div>
<div id="jukebox">
  <p>
    volume <input type=range min=0 max=1.0 value=0.5 step=0.05 id=volume />
  </p>
<ul id="urls">
  <li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/dfd74295e05cdcd03fa9c483e82a481c.mp4" />んっしょ…あ､ﾌﾟﾛﾃﾞｭｰｻｰ! まだお着替えしてるから､待っててーっ! んっと､靴下はきづらい…あ､こっちもほどけちゃった! あっ､ﾈｸﾀｲもまだ結べてないの! えへ☆ </label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/025873a1a46e5a25d356db524b2f75a6.mp4" />まだお着替え中だよーっ!?</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/152b6ce9f7c48756c1b1a645ac0279ef.mp4" />えへへ､今日はわるい子だよっ!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/b41d1a1df01b29d851e7c469a42458ee.mp4" />ｶｯｺｶﾜｲｲ服が着れてうれしい♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/1be98b13f7ca23b967f2bbecacd1f2aa.mp4" />一人でできるよ! …たぶん?</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/5fc0413e09a9cc62b90cb08b4c0d35a3.mp4" />ﾌﾟﾛﾃﾞｭｰｻｰ､ﾈｸﾀｲの結び方教えてくれるのー?</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/c903893c4914f46198ab97c464742e8a.mp4" />今日はﾌﾟﾛﾃﾞｭｰｻｰにいっぱい甘えちゃおー♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/c8d731e61aa44f33ecd4e255c98e4295.mp4" />靴下手伝ってくれるのー? あはは､足はくすぐったいよぉっ!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/f75bce18a95444736ff3a419dd714e6b.mp4" />わるい子みりあだぞーっ!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/f3fea0d0b88797d1ced8a95659a55f5b.mp4" />いたずらしちゃうぞっ♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/a34b873ffe18576300343763a6cb1b7c.mp4" />お着替え時間､もうちょっと!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/dee0e495171027ac94c61e07da3848b3.mp4" />ﾌﾟﾛﾃﾞｭｰｻｰに手伝ってもらっちゃった...てへ!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/d4e22268f73cf09b772a2473e90193f3.mp4" />ﾌﾟﾛﾃﾞｭｰｻｰのﾈｸﾀｲ結んであげる! ぎゅーっ♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3406501/344891c55827b8a76eed41d04269b8b7.mp4" />あのね､私はお家じゃお姉ちゃんだからちゃんとお着替えできるんだよ? でも､手伝ってくれてうれしかったの! えへへ～♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/3bb4f738de0e2292f5d9333f37ad0e6c.mp4" />ぴょーんっ♪ﾊﾟﾀﾊﾟﾀ♪今日のみりあはｱｸﾏになったから､夜の街を飛び回っちゃうんだよ! お空のおさんぽ､ﾌﾜﾌﾜで楽しいなっ♪ﾌﾟﾛﾃﾞｭｰｻｰもいっしょに､じゃーんぷっ!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/f2bfda66b2ef6b6bd75ad0f4659af670.mp4" />ﾊﾟﾀﾊﾟﾀﾊﾟﾀ♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/b4c954070d5468cd4d276e0b52f2495a.mp4" />ｶｯｺｶﾜｲｲ服が着れてうれしい♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/89a6f46ee5ab0fbef287ebc31f1d6bd9.mp4" />ｱｸﾏだから夜更かししてもｲｲ?</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/07ab5f2e3e675b65567f3c54e01683a5.mp4" />えへへ､今日はわるい子だよっ!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/d839b334fcf9b7795aedc40c603900ac.mp4" />ﾄﾗﾝﾎﾟﾘﾝでぴょこぴょこする! 飛んでるように見えるかなー♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/11a7073f9639694ef613eb9766e3e958.mp4" />わるい子みりあだぞーっ!</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/ced600d8bfc9e878ebf0c7346c910e83.mp4" />みてみて! 羽がﾊﾟﾀﾊﾟﾀって♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/932723ff32bba5b2b03ac885151f50b4.mp4" />いたずらしちゃうぞっ♪</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/1d10c5538920e17d91cc273767825a53.mp4" />お仕事場にも飛んでいけたらいいのに! 目立っちゃうかなー?</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/2eca4d8283d6cdbb9e1f9c9d5e065127.mp4" />ﾌﾟﾛﾃﾞｭｰｻｰもいっしょにわるいｱｸﾏになっちゃう?</label></li>
<li><label><input type="radio" name="koe" data-url="http://idolmaster.edgesuite.net/idolmaster/sound/3506502/01a8bde34f4fdbf70e13ab0d83fc1a7d.mp4" />いつか夜にﾌﾟﾛﾃﾞｭｰｻｰのところまで飛んでいっちゃうから､ちゃんと抱きとめてほしいなーっ! 約束だよーっ♪</label></li>
  
</ul>
</div>

script.coffee

audio = null

play = (url) ->
  volume = Number $("#volume").val()
  volume = 1 if volume > 1

  if url
    audio = new Audio(url)
  return if audio == null
  audio.volume = volume
  audio.load()
  $(audio).on 'canplay', ->
    this.play()
  #audio.autoplay = true
  
$("[data-url]").on 'click', ->
  play($(this).data('url'))
  $("#serifu").text $(this).closest("label").text()

$("#serifu").on 'click', ->
  play()
  

style.css

body {
  background: black;
  color: #eee;
  width: 320px;
  margin: auto;
}
#title {
  background-color: #333;
  font-size: 1em;
  line-height: 2;
  font-weight: bolder;
  text-align: center;
  margin: 0;
  padding: 0;
}
#title::before, #title::after
{
  display: block;
  width: 320px;
  height: 6px;
  content: "";
  background-size: 100% 100%;
}
#title::before {
  background-image: url(http://125.6.169.35/idolmaster/image_sp/ui/line_hanyo_up.jpg);
}
#title::after {
  background-image: url(http://125.6.169.35/idolmaster/image_sp/ui/line_hanyo_down.jpg);
}

#serifu {
  width: 320px;
  background: white;
  color: black;
  word-wrap: break-word;
}
#serifu::before, #serifu::after {
  display: block;
  width: 320px;
  content: "";
  background-size: 100% 100%;
}
#serifu::before {
  height: 22.5px;
  background-image: url(http://125.6.169.35/idolmaster/image_sp/ui/line_quest_hukidasi_up_passion.jpg);
}
#serifu::after {
  height: 16px;
  background-image: url(http://125.6.169.35/idolmaster/image_sp/ui/line_quest_hukidasi_down_passion_02.jpg);
}

ul {
  list-style: none;
  margin: 0; padding: 0;
}
#urls li {
  overflow: hidden;
  white-space: pre;
  margin: 0.5em 0;
}

みりあって可愛いっすね～