ググっても出てこないものをプログラミングするのが大好きな、ユゲタです。
今回は、とある音声再生アプリを作っている時に、時間経時のフォーマットでなかなか良いものが無かったので、自作してブログに載っけておきます。
それは、動画や音声をブラウザで再生する時に表示される時間表示フォーマットです。
こんな感じのヤツですね。
やりたい事
AudioAPIで取得した秒数を、「分 : 秒」のフォーマットに変換する。
ついでなので、「時 : 分 : 秒 : ミリ秒」ぐらいの表示に対応してみたいと思います。
ソース公開
timeFormat function(timeSec){
timeSec = timeSec || 0
const hh = ("00"+ ~~(timeSec / 3600)).slice(-2)
const mm = ("00"+ ~~(~~(timeSec / 60) % 60)).slice(-2)
const ss = ("00"+ ~~(timeSec % 60)).slice(-2)
const ms = (~~((timeSec - Math.floor(timeSec)) * 1000) + "000").slice(0,3)
return hh +":"+ mm +":"+ ss +"."+ ms;
}
かんたん解説
基本的に時、分、秒の数値フォーマットは2桁、ミリ秒は3桁の桁数にしてます。
桁数併せは、ゼロパディングの定番方式でsliceを使っているんですが、ミリ秒は0を後ろ付けするので、sliceの書き方が他のものと少し違っているので、仕様変更で書き換える時は注意してください。
それぞれの値の計算式は、
時 : 秒を3600で割った小数点切り捨て
分 : 秒を60で割った小数点切り捨て
秒 : 小数点の切り捨て
ミリ秒 : 小数点のみ抜き出した値に1000をかけた値
ちなみに、「分 : 秒」だけの表示にすると、1秒に1回の処理でよくなるので、ミリ秒を出さない方が見た目も忙しく無くCPU処理も少なくいいかも。
それか、ミリ秒1桁ぐらいでもいいかもですね。
フォーマットはreturnの返している値をちょろっと書き換えてお使いください。
最後に
実はこれまで、この処理は何度かプログラミングしてきた事があるんですが、過去の自分のソースが効率が悪くて、今回焼き直してみました。
無題にif文を多用していたり、フォーマットをわざわざしていさせて、文字列変換などさせていたのが、とても無駄に思えてしまいました。
自分のソースコードをレビューしてプルリクした感じですね。
自分の成長過程がちょっとだけ分かって、なかなか楽しい作業だったという事は自分しかわかりませんが、スキルアップ感があったので、こうしたスニペット・プログラミングの積み上げも重要であると感じた今回のプログラミング作業でした。
