人生ずっと勉強。
ITを軸としたT型人間になりたい人のブログ。
09 | 2017/10 | 11
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
29 30 31 - - - -

スポンサーサイト
上記の広告は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>


スポンサーサイト
【HTML5】Audio APIを使って質素すぎる音楽プレイヤーを作ってみた

ブラウザで音楽プレイヤー / jsdo.it

HTML5/CSS3 がめちゃんこおもしろい。
なので勢いで質素すぎる音楽プレイヤーを作ってみた。
デザインと、細かい挙動がまだまだ洗練されてませんが、
もうちょい手を加えれば「とりえあず音楽聴ければOK」な
自分には十分なプレイヤーがカンタンにできちゃいそう。
HTML5すごし。
やっぱりローカルファイルを扱えるようになると
アプリケーションの夢が広がりんぐですね。

【質素すぎる内部仕様解説】
・File APIでファイルを取得(複数可)
・File APIのreadAsDataURLメソッドを用いて、
音声ファイルをデータスキームとして取得。
(参考:データスキームBASE64
・取得したデータスキームを配列にぶっこむ
・Audio オブジェクトのsrc属性を逐次、配列にぶっこんだ
データスキームに設定することで音楽を連続再生


【JavaScript】
// 参考
// ・html5 audioおよびコーデックのサポート状況を調べる方法
// http://himaxoff.blog111.fc2.com/blog-entry-97.html
// ・2010年10月時点での各ブラウザのコーデック対応状況
// http://sothis.blog.so-net.ne.jp/2010-10-27
// ・Event compatibility tables
// http://www.quirksmode.org/dom/events/index.html
// 07. video/audio要素のイベントを捕捉する
// http://html5.ononolab.com/?p=107
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(){
play();
}, false);

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

document.getElementById("finfo").innerHTML = "";
var files = document.getElementById("myFile").files;
for( var i = 0; i < files.length; i++ ){
read( files[i], i );
}
}, true);

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

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

return function( cmd ){
switch( cmd ){
case "play":
if( pause ){
audio.play();
pause = false;
}else if( playList[index] ){
audio.src = playList[index];
audio.play();
index++;
}
break;
case "pause":
audio.pause();
pause = true;
break;
case "stop":
audio.pause();
audio.currentTime = 0;
pause = true;
break;
default:
break;
}
};
}
function play(){
player( "play" );
}
function pause(){
player( "pause" );
}
function stop(){
player( "stop" );
}



【HTML】
<div>
<input type="file" id="myFile" multiple="multiple" />
</div>
<div id="finfo"></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>
</div>




わたくし

いろいろリンク

カテゴリ

月別アーカイブ

最新記事

最新コメント

最新トラックバック

検索フォーム

RSSリンクの表示

リンク

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

ブロとも申請フォーム

この人とブロともになる

QRコード

QR

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