Multi Track Playerっぽいのつくった。
本人バレが怖いのでgithubのありかとか配備場所とかは言えませんが、私、バンド活動をしておりまして、練習後の会話で「マルチトラックレコーダーのweb版とか無いのかな?」という話になりまして、探したけど、きっとあるのだろうけど見つけられないので2時間ぐらいで作りました。作ったのはマルチトラックプレイヤーです。トラックをアップローダーでアップして、アップしたファイルをaudioタグにセットして協調して再生、一時停止、シークとかが出来ればよいかなと。バンドの皆さんからは高評価を頂いております。
アップローダーはいぜんどこからか持ってきたものを流用しました。以下、マルチトラックプレイヤー部分のソース。
phpファイル
<?php error_reporting(E_ALL); function getFiles(){ $mp3_files = glob("/var/www/hoge/mtr/uploader/uploads/*.mp3"); $m4a_files = glob("/var/www/hoge/mtr/uploader/uploads/*.m4a"); return array_merge($mp3_files,$m4a_files); } function renderSelect($files,$i){ $html = "<select id=\"select-" . $i . "\" style=\"display:inline-block\">\n"; foreach($files as $k => $v){ $html .= "<option value='" . normalizePath($v) . "'>" . basename($v) . "</option>\n"; } $html .= "</select>\n"; return $html; } function renderSetButtons($i){ $html = "<button id=\"set-" . $i . "\" data-select=\"select-" . $i . "\" data-audio=\"audio-" . $i . "\">set</button>\n"; $html .= "<button id=\"unset-" . $i . "\" data-select=\"select-". $i . "\" data-audio=\"audio-" . $i . "\">unset</button>\n"; $html .= "<span id=\"setted-" . $i . "\"></span>"; return $html; } function normalizePath($value){ return "https://somewhereinwww/hoge/mtr/uploader/uploads/" . basename($value); } $files = getFiles(); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Multi Track Player</title> <script src="//code.jquery.com/jquery-1.8.3.js"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script src="app.js"></script> </head> <body> <h1>Multi Track Player</h1> <?php for($i=0,$l=8;$i <$l;$i++){ ?> <div> <audio id="audio-<?php echo $i?>" src="" controls> <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio> <?php echo renderSelect($files,$i)?> <?php echo renderSetButtons($i) ?> </div> <?php } ?> <p><button id="play">play</button> <button id="pause">Pause</button></p> <div id="slider" style="margin:20px;"></div> </body> </html>
JS
$(function(){ $("#slider").slider({min : 0}); var max_duration = 0; function play(){ $("audio[id^='audio']").each(function(){ try{ if($(this)[0].src != "" ){ $(this)[0].play().catch(function(){}); } } catch (x) { } }); } function pause(){ $("audio[id^='audio']").each(function(){ try{ if($(this)[0].src != "" ){ $(this)[0].pause().catch(function(){}); } } catch (x) { } }); } function setCurrentTime(time){ $("audio[id^='audio']").each(function(){ if($(this)[0].src != undefined ){ $(this)[0].currentTime = time; } }); } $("#play").click(function(){ play(); }); $("#pause").click(function(){ pause(); }); $("button[id^='set']").click(function(){ var src= $("#" + $(this).data("select")).val(); $("#" + $(this).data("audio"))[0].src = src; setTimeout(function(elem){ var duration = $("#" + $(elem).data("audio"))[0].duration; if(max_duration < duration){ max_duration = duration; $("#slider").slider( {max : duration, min : 0 }); } },200,this); }); $("button[id^='unset']").click(function(){ $("#" + $(this).data("audio")).attr("src",""); }); var players = $("audio[id^='audio']"); players.each(function(){ var player = $(this)[0]; player.addEventListener("timeupdate",function(){ if(player.currentTime){ var VALUE = Math.floor(player.currentTime); $("#slider").slider({value : VALUE}); } }); }); $("#slider").on("mouseup touchend",function () { var currentTime = $("#slider").slider("value"); setCurrentTime(currentTime); play(); }); $("#slider").on("mousedown touchstart",function () { pause(); }); });
chromeが怒るので
.catch(function(){})
みたいなソース初めて使いました。
jQueryから抜け出せない。
stackoverflow.com