Help us understand the problem. What is going on with this article?

iOS Audioタグで曲の長さが取得できない問題

More than 3 years have passed since last update.

はじめに

音声配信サービスを開発中でHTML5で追加されたAudioタグを使ってプレイヤーの実装を行っていたが一部で曲の長さが取得できない問題に遭遇した。

曲の長さの取得方法

コピペしても動かないけど、曲の長さの取得方法はこんな感じ。

index.html
<!doctype html>
<html>
<body>
  <audio id="audio" src="sample.mp3"></audio>
</body>
</html>
app.js
var $audio = document.getElementById("audio");
$audio.addEventListener("loadedmetadata", function() {
  console.log( $audio.duration );
});

こんな感じのコードを実行する。
メタデータが取得できる状態になるとイベントが発火、コンソールに曲の長さが表示される。

問題

最新のiOSを含めたiOSでdurationが上手く取得できずinfinityが返ってくる。
しかも、ある環境では問題なく取得できて、ある環境では取得できない。
取得できない環境でも、1度最後まで再生すると取得できる。

原因

サーバーのレスポンスがContent-Rangeに対応していない。
Content-Rangeの詳しいことはRFC読んでください。
RFC 7233 — HTTP/1.1: Range Requests (日本語訳

解決法

クライアントではどうしようもないのでサーバー側でContent-Rangeに対応する。

注意

この問題すべての解決法がこの原因かはわからないという事です。

あとがき

曲の長さが取得できない場合があるという記事は多く見かけましたが、Content-Rangeに対応していないからという記事が日本語では見つからなかったので書いてみました。
何か他の情報をお持ちの方はぜひコメントなどいただけると幸いです。

ちなみに、Content-Rangeに対応していなくて手持ちのAndroid、およびPCブラウザでは曲の長さが取得できていたのでiOS固有の問題っぽいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした