mootoolsのミュージックプレーヤー/その他/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

ミュージックプレーヤーmootools-1.2.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MooP3 Player</title>
<script type="text/javascript" src="mootools-1.2.js"></script>
<script type="text/javascript" src="MooSound.js"></script>

<style type="text/css">
#playlist {
    width: 95%;
    margin: auto;
}

.song {
    width: 100%;
    background-color: #f9f9f9;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px;
}

.song.playing {
    border-top: #000;
    background-color: #ff9;
}

.seekbar {
    background: #afa;
    border: 1px solid #9f9;
    height: 20px;
    width: 0%;
    cursor: pointer;
}

.position {
    left:0;
    position: relative;
    width: 1px;
    height: 20px;
    border-left: 1px solid #8f8;
    border-right: 1px solid #3f3;
}

.song h3 {
    margin: 0;
}

.controls {
    float: right;
    width: 15%;
}

.controls img {
    cursor: pointer;
}
</style>

<!--start-->
<script type="text/javascript">

window.addEvent('domready', function() {

    var i = 0;
    var options = {
        'onRegister': function() {
            i++;
            this.el = new Element('div', {'class':'song'});
            this.title        = new Element('h3', {'class':'title', text:this.url}).inject(this.el);
            this.controls     = new Element('div', {'class':'controls'}).inject(this.el);
            this.seekbar      = new Element('div', {'class': 'seekbar'}).inject(this.el);
            this.position     = new Element('div', {'class':'position'}).inject(this.seekbar);
            this.seekbar.set('tween', {duration:this.options.progressInterval, unit:'%', link: 'cancel'});
            this.position.set('tween', {duration:this.options.positionInterval, unit:'%', link: 'cancel'});
            this.playEl       = new Element('img', {'class':'play',  src:'img/play.png',id:'play'+i }).inject(this.controls);//再生ボタン画像
            this.stopEl       = new Element('img', {'class':'stop',  src:'img/stop.png',id:'stop'+i }).inject(this.controls);//停止ボタン画像
            this.pauseEl      = new Element('img', {'class':'pause', src:'img/pause.png',id:'pause'+i}).inject(this.controls);//一時停止ボタン画像
            this.stopEl.addEvent('click', function() { this.stop(); }.bind(this));
            this.playEl.addEvent('click', function() { this.start(); }.bind(this));
            this.pauseEl.addEvent('click', function() { this.pause(); }.bind(this));
            this.seekbar.addEvent('click', function(e) {
                var coords = this.seekbar.getCoordinates();
                var ms = ((e.page.x - coords.left)/coords.width)*this.duration;
                this.jumpTo(ms);
            }.bind(this));
            this.el.inject($('playlist'));
        },
        'onLoad': function() { },
        'onPause': function() { },
        'onPlay': function() { this.el.addClass('playing');    },
        'onStop': function() { this.el.removeClass('playing'); },
        'onProgress': function(loaded, total) {
            var percent = (loaded / total*100).round(2);
            this.seekbar.get('tween').start('width', percent * .85);
        },
        'onPosition': function(position,duration) {
            var percent = (position/duration*100).round(2);
            this.position.get('tween').start('left', percent);
        },
        'onID3': function(key, value) {
            if (key == "TIT2") { this.title.set('text', value); }
        },
        'onComplete': function() {
            Playlist.playRandom.delay(100, Playlist);
        }
    };


    var songs = ["mp3s/robot2.mp3"]; //ここに流したいMP3を記述する

    Playlist.loadSounds(songs, options);
    $('play').addEvent('click', function(e) {
        e.stop();
        Playlist.playRandom(); 
    });

});

</script>
<!--end-->
</head>

<body>
<div style="height:100px;">
<div id="playlist"></div>
</div>
</body>
</html>

	msteigerwalt

mootoolsを使用したMP3ミュージックプレーヤー、MooSound。
必要なファイルを読み込ませて、流したいMP3を指定するだけで実装できます。
サンプルでは音楽を流さないようにしているので、サイトへ行き実物を確認してください。

セッティング

１．ダウンロード＆セッティング

サイトへ行き、「Download Files」の項目にあるファイルを全てダウンロードします。
swfファイル等は、右クリックで保存するといいと思います。
リンクテキストはパス形式で書かれているので、img/stop.png 等と書かれていたら、imgフォルダを作成しそこに保存してください。