動かざることバグの如し

近づきたいよ 君の理想に

jPlayerでストリーミングMP3を再生してみる

javascript

jPlayerってストリーミング再生もできるのね。すげーなこれ。

<!DOCTYPE html>
<html>
<head>
<title>AnimeNfo Radio</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   var stream = {
       mp3: "http://itori.animenfo.com:443/;stream/1"
   },
   ready = false;

   $("#jquery_jplayer_1").jPlayer({
       ready: function (event) {
           ready = true;
           $(this).jPlayer("setMedia", stream).jPlayer("play");
       },
       pause: function() {
           $(this).jPlayer("clearMedia");
       },
       error: function(event) {
           if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
               // Setup the media stream again and play it.
               $(this).jPlayer("setMedia", stream).jPlayer("play");
           }
       },
       swfPath: "js",
       supplied: "mp3",
       preload: "none",
       wmode: "window",
       keyEnabled: true
   });
});
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <a href="javascript:;" class="jp-play" tabindex="1">play</a>
                <a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
                <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
                <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>