人生ずっと勉強。
ITを軸としたT型人間になりたい人のブログ。
01 | 2011/02 | 03
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 - - - - -

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【HTML5】Audio APIを使って質素すぎる音楽プレイヤーを作ってみた その後
ブラウザで音楽プレイヤー / jsdo.it

とりあえず以下を追加。
・プレイリスト
・巻き戻し/早送り
・次の曲へボタン
・再生時間表示


【JavaScript】
var audio = new Audio( "" );
var playList = new Array();
var player = createPlayer();

// いろいろ初期化
var time = document.getElementById( "time" );
audio.addEventListener( "timeupdate", function(){
var current_time = audio.currentTime;
var m = ( '0' + Math.floor( current_time / 60 ) ) .slice( -2 );
var s = ( '0' + Math.floor( current_time % 60 ) ) .slice( -2 );
time.innerText = m + ":" + s;
},false);
audio.addEventListener( "ended", function(){
player.setIndex( player.getIndex() + 1 );
play();
}, false);
audio.addEventListener( "loadedmetadata", function(){
var duration = audio.duration;
var m = ( '0' + Math.floor( duration / 60 ) ) .slice( -2 );
var s = ( '0' + Math.floor( duration % 60 ) ) .slice( -2 );
document.getElementById( "duration" ).innerHTML = m + ":" + s;
}, false);
YAHOO.util.Event.on( "playlist", "dblclick", playSelectedSong );

// ファイルが選択されたら読み込む
document.getElementById("selectingsongs").addEventListener("change", function(){
audio.addEventListener( "error", function(){
alert( "エラーが発生しました:" + audio.error.code );
}, false);

var files = document.getElementById("selectingsongs").files;
for( var i = 0; i < files.length; i++ ){
read( files[i], i );
}
}, true);
// 再生ファイル選択のさいはplaylistを初期化する
YAHOO.util.Event.on( "selectingsongs", "click", function(){
document.getElementById( "playlist" ).innerHTML = "";
}
);
// 再生リストに追加
YAHOO.util.Event.on( "addingsongs", "change", function(){
var files = document.getElementById("addingsongs").files;
for( var i = 0; i < files.length; i++ ){
read( files[i], i );
}
}
);
//早送り
YAHOO.util.Event.on( "fast-forward", "mousedown", function(){
audio.currentTime += 2.0;
}
);
//巻き戻し
YAHOO.util.Event.on( "rewind", "mousedown", function(){
audio.currentTime -= 2.0;
}
);
//次の曲
YAHOO.util.Event.on( "next", "click", function(){
player.setIndex( player.getIndex() + 1 );
play();
}
);

//ファイルをデータスキームとして読み込み、配列に保存
function read( file, i ){
var reader = new FileReader;
reader.onload = function(){
playList.push( reader.result );
var song = document.createElement( "option" );
song.value = i;
song.innerHTML = file.name;
document.getElementById( "playlist" ).appendChild( song );
};
reader.readAsDataURL( file );
}

// プレイヤーを作るクロージャ
function createPlayer(){
var index = 0;
var pause = false;

this.play = function(){
if( pause ){
pause = false;
}else if( playList[index] ){
audio.src = playList[index];
}
audio.play();
};
this.pause = function(){
audio.pause();
pause = true;
};
this.stop = function(){
audio.pause();
audio.currentTime = 0;
};
this.setIndex = function( newIndex ){
index = newIndex;
};
this.getIndex = function(){
return index;
};
return this;
}

function play(){
player.play();
}
function pause(){
player.pause();
}
function stop(){
player.stop();
}
/**
* プレイリスト中の選択された音楽を再生
* @param {Object} event
*/
function playSelectedSong( e ){
var listNum;
if( e.srcElement ){
listNum = e.srcElement.value;
}else{
listNum = e.target.value;
}

if( playList[listNum] ){
player.setIndex( listNum );
play();
}
}



【HTML】
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<div>
<input type="file" id="selectingsongs" multiple="multiple" />
</div>

<div id="player">
<input type="button" value="再生" onclick="play()" />
<input type="button" value="一時停止" onclick="pause()" />
<input type="button" value="停止" onclick="stop();" />
<span id="time">00:00</span> / <span id="duration">00:00</span>
</div>
<select id="playlist" size=5>
</select>

<div id="ui">
<input id="next" type="button" value="次の曲"" />
<input id="rewind" type="button" value="巻き戻し"" />
<input id="fast-forward" type="button" value="早送り" />
追加:<input type="file" id="addingsongs" multiple="multiple" />
</div>


スポンサーサイト


わたくし

いろいろリンク

カテゴリ

月別アーカイブ

最新記事

最新コメント

最新トラックバック

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

ブロとも申請フォーム

この人とブロともになる

QRコード

QR

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。