javascriptやphpなどを使ってwavファイルのURLからデータの長さ（時間）を取得したい

Question

###実現したいこと・前提条件

• 自分のサーバー(Wordpress運用中)にあるwavファイルの再生時間（長さ）を取得して出力したい
• Audioタグは使わない
• phpやjavascriptを使って取得したい

オーディオタグを使って、該当箇所のIDを指定すればjavascriptで実現できるような記事はいくつか見かけたのですが、
ファイルのURLを指定して情報を取得したいです。

###試したこと
例えば、単純にファイルのサイズを取得するだけであれば、下記の方法でできました。

function get_filesize( $url, $unit = false, $decimals = 2 ) {
    $headers = get_headers ( $url, 1 );
    if ( !empty ( $headers['Content-Length'] ) )
        $len = (int) $headers['Content-Length'];
    else
        return false;
    if ( !$unit ) {
        if ( $len >= pow ( 1024, 3 ) )
            $unit = 'GB';
        elseif ( $len >= pow ( 1024, 2 ) )
            $unit = 'MB';
        elseif ( $len >= 1024 )
            $unit = 'KB';
        else
            $unit = 'B';
    }
    if ( $unit == 'GB' )
        $len = number_format ( floor ( $len / pow ( 1024, 3 ) * 100 ) / 100, $decimals ) . $unit;
    elseif ( $unit == 'MB' )
        $len = number_format ( floor ( $len / pow ( 1024, 2 ) * 100 ) / 100, $decimals ) . $unit;
    elseif ( $unit == 'KB' )
        $len = number_format ( floor ( $len / 1024 * 100 ) / 100, $decimals ) . $unit;
    elseif ( $unit == 'B' )
        $len = number_format ( $len ) . $unit;
    return $len;
}
echo ( $len = get_filesize( 'ファイルのURL' ) ) ? $len : '取得できませんでした。';

引用元サイト
http://www.560designs.com/memo/1277.html

たぶん、phpオーディオをでファイルの長さを取得するのは無理なのではないかと思っています。

もしjQueryが必要であれば、読み込むべきプラグインやコードの書き方のヒントをいただきたいです。

###補足情報（FW/ツールのバージョンなど）
WordPress5.3.2
テスト環境サーバー：スターサーバー ライトプラン
phpバージョン：PHP7.3.14（意味ないかもしれませんが下げることは可能）

Answer 1

JavaScriptのみで可能です。
HTMLMediaElement.duration MDN

Comments

[kyoya0819]

URLをもとに、videoタグをDOMで作ってそこから取り出せば良いのでは？

[bokupiroki]

ありがとうございます。
いただいた情報を基に、DOMの使い方を現在調べながら進めております。

初歩的な質問で申し訳ないのですが、
wavファイルの長さを取得する場合であっても
audioタグではなくvideoタグを使うのでしょうか。

[kyoya0819]

wavならaudioタグでできるはずです

[bokupiroki]

ありがとうございます。
一旦動画ファイルで試しております。

javascriptで動的に「見えないvideo要素」を生成し、
そこから再生時間の情報を抽出すればいいとの理解に至りました。

そして、再生時間を取得して表示できるようになりました。

しかし、出力結果がまれに「NaN」の表記になってしまいます。

おそらくjavascriptや動画が読み込まれるタイミングが原因で
不安定になっていると考えているのですが、
何か対策するためのヒントをいただけないでしょうか。

---
<div style="display:none;" id="kokoyade"></div><!--ここに見えないオーディオタグを出力-->

<span id="jikan"></span>秒<!--ここに再生時間を出力-->

<script language="javascript" type="text/javascript">
// video要素を生成
var video = document.createElement('video');
// IDを追加
video.id = "mv";
// パスを追加(ここにURL)
video.src = '動画のURL';

// 生成したvideo要素をhtml上の<div style="display:none;" id="kokoyade"></div>内に出力
document.getElementById('kokoyade').appendChild(video); //見えない場所にvideoタグを動的に生成

//videoオブジェクトの取得 ▼
var media = document.getElementById("mv");

//htmlの<span id="jikan"></span>内に出力
window.onload = function () {
var movtime = media.duration;
target = document.getElementById("jikan");
target.innerHTML = movtime;
}
</script>
---

[kyoya0819]

aidio要素のonload発火にするとどうでしょう？

[bokupiroki]

出力結果が、下記のようになればうまくいくのではないか？ということですね。

<div style="display:none;" id="kokoyade"><video id="mv" src="動画ファイルのURL" onload="関数名();"></video></div>

javascriptで動的に生成されたvideo要素に対して、どうやって「onload="関数名();"」を追加するのかが分かりません。

試しにvideo要素にIDを追加した時と同じ感じで
video.onload = "関数名();" ;
とjavascriptに書いてみましたが、反映されませんでした。

変数videoの中身は下記です。
var video = document.createElement('video');

正しい方法があればご教授願います。

[bokupiroki]

//video要素にonload追加
video.setAttribute("onload", "関数名();");
みたいな感じで追加できそうなことが分かりました。

また結果を報告します。

[bokupiroki]

video.setAttribute("onload", "関数名();");
だと、なぜかjavascript自体が動きませんでした。

結局、「0.25秒待ってからjavascriptを走らせる」
という方法で様子見することにしました。
ありがとうございます。

以下、最終的なコードです。

<div style="display:none;" id="kokoyade"></div><!--ここに見えないオーディオタグを出力-->

<span id="jikan"></span>秒<!--ここに再生時間を出力-->

<script language="javascript" type="text/javascript">
// video要素を生成
var video = document.createElement('video');
// IDを追加
video.id = "mv";
// パスを追加(ここにURL)
video.src = '動画のURL';

// 生成したvideo要素をhtml上の<div style="display:none;" id="kokoyade"></div>内に出力
document.getElementById('kokoyade').appendChild(video); //見えない場所にvideoタグを動的に生成

//videoオブジェクトの取得 ▼
var media = document.getElementById("mv");

//htmlの<span id="jikan"></span>内に出力
var jikankeisan = function () {
var movtime = media.duration;
target = document.getElementById("jikan");
target.innerHTML = movtime;
}

//0.25秒待ってから実行
setTimeout (jikankeisan,250);
</script>

Answer 2

問題を整理していきましょう。

最も気を付けなければいけない問題は
音楽の時間を知りたければ再生するしかないことです。
具体的に言うと、再生するつもりで音楽ファイルを開いて中を開けてみる必要があります。

PHPはWebサーバです。
基本的な用途？HTTPリクエストを待って、HTMLの文章作って投げ返すことですね。
アクセスが届いて、そこで音楽ファイルを鳴らしても何の役にも立ちません。

レンタルサーバを借りる為にさくらインターネットに契約したとすると
さくらインターネット社のマシンから突如音楽が鳴り始めるわけですよ。
馬鹿じゃねーの？アクセスした私が聴きたいのに！！
……という訳で、基本的にサーバマシンというものは音楽ファイルを扱う事は出来ません。

でもまぁ、音楽ファイルを扱う為のモジュールを組み込んで
実際に再生はしないけれど、再生出来るベースでファイルを開く事は可能なようです。
getID3()を使った音楽ファイルの情報取得

---

オーディオタグを使って、該当箇所のIDを指定すればjavascriptで実現できるような記事はいくつか見かけた

普段我々が閲覧するのに使っているChromeやFirefox等のブラウザ
これは用途によって音楽や動画を鳴らす可能性があるので、専用のモジュールが組み込まれています。
だからYouTubeにアクセスすれば動画を流せるんですね。

なので実現が楽なのは、
CSSdisplay: none等を組み込んだ不可視のaudioタグを設置して、
JavaScriptで対象の音楽ファイルを開きながらチェックしていくのが最も実装しやすいと思います。

上記のgetID3はバイナリ形式のファイルを開いてタグ情報を読みに行っているようなので
動きそうではありますが、C言語のツールを導入しなければならないようなものもありますので、
自分で好き勝手に弄れるVPSや専用サーバ等が必要になってくるかも知れません。

Comments

[bokupiroki]

ありがとうございます。
だんだんわかってきました。

おっしゃるようにdisplay: noneにして、
タグの時間を取得できるところまで来たので
うまく表示されるように現在調整中です。