プログレスバー 3 | ストックオーディオコンバーター

進行度の送信

prog.txtから取得した、変換の秒数$durCurSecと、音声ファイルから取得した、曲の長さの秒数$durTotalSecからパーセンテージを割り出します。

$perc = intval($durCurSec / $durTotalSec * 100).'%'; 

これをAJAXでクライアント側に送信します。

$data['perc'] = $perc;
echo json_encode($data);

AJAXの再帰処理

サイトではCSSのフレームワークであるBootstrapを使用しているので、次のようにプログレスバーをHTMLに記述します。

<div class="progress">
    <div id="perc" class="progress-bar"></div>
</div>

上記のサーバー側の処理をprogress.phpとし、AJAXの関数をprogress()とすると、

function progress(){
    $.ajax({
        url  : 'progress.php',
        type : 'POST',
        cache : false,
    })
    .done(function(data, textStatus, jqXHR){
        data = JSON.parse(data);
        $('#perc').css('width', data.perc);
        if (data.perc === '100%'){
            //変換完了時の処理
        } else {
            setTimeout(progress, 1000);
        }
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        //エラー発生時の処理
    });
}

サーバー側から送られてきたJSON形式のデータをJSON.parse()でオブジェクトに変換します。このプログレスバーの進行度はCSSのwidthプロパティで調整するので、送られてきたデータに格納されているパーセンテージを指定します。変換が済んでいない場合は、setTimeout()を使って、1秒後にまたこれまでの処理を繰り返します。
プログレスバーのアニメーションの速度を変えたい場合は、CSSで以下のように変更します。

.progress-bar {
    -webkit-transition-duration: 3s;
    transition-duration: 3s;
}

ZIP圧縮

変換が完了した後、複数のファイルをダウンロードする為に、ファイルをzipフォルダにまとめます。変換したファイルのフォルダをoutputs、新たに作成するzipフォルダをfilesとすると、Linuxのコマンドzipにより、

exec('zip -r files -j outputs </dev/null 2>&1', $contentAry, $error);

-rで再帰的にファイルを格納し、-jで格納するファイルにパス名を含めないようにします。

URL: sac.ringil-music.com
環境: さくらのVPS・Centos7・Nginx・PHP-FPM

コメントを残す

メールアドレスが公開されることはありません。