<h1 id="heb7bfe0621">オブジェクトのコピー</h1> JavaScriptではオブジェクトのコピーに気をつかいます。 変数をコピーする場合は書いた通りですが、オブジェクトではそう簡単ではないのです。 <pre><code>[javascript:JavaScript]
let a = 0
console.log(a) // 0
let b = a
b = 1
console.log(a) // 0</code></pre> <code>b</code>という変数に<code>a</code>を代入し、<code>b</code>を書き換えても、<code>a</code>の中身は変わりません。 これをオブジェクトでやってみます。 <pre><code>[javascript:JavaScript]
let obj1 = { a: 0 }
console.log(obj1.a) // 0
let obj2 = obj1
obj2.a = 1
console.log(obj1.a) // 1</code></pre> このように、オブジェクトのコピー先でプロパティの値を変更するとコピー元のオブジェクトのプロパティの値も変更されます。 これは、オブジェクトの場合はコピーではなく、オブジェクトへのリンクを共有しているだけだからです。 上記の例では<code>{ a: 0 }</code>というオブジェクトの位置を<code>obj1</code>が保持し、それを<code>obj2</code>にコピーしているので、<code>obj1.a</code>も<code>obj2.a</code>も同じオブジェクトを指します。 <blockquote>ちなみにオブジェクトは<code>let</code>だろうと<code>const</code>だろうとプロパティの書き換えはできます笑</blockquote> <h2 id="h84c0fe690c">Object.assign()を使う方法</h2> オブジェクトを変数と同じようにコピーするには<code>Object.assign()</code>を使ってオブジェクトを新しく作成する必要があります。<code>Object.assign()</code>はES6以降で使用できます。 <pre><code>[javascript:JavaScript]
let obj1 = { a: 0 }
console.log(obj1.a) // 0
let obj2 = Object.assign({}, obj1)
obj2.a = 1
console.log(obj1.a) // 0</code></pre> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" target="_blank" rel="noopener noreferrer">Object.assign() - JavaScript | MDN</a> ただ、<code>Object.assign()</code>にも問題があって、コピー元のオブジェクトを展開してはくれないのです。プロパティに配列やオブジェクトを含む多層のオブジェクトだと、2層目以下はまたメモリ位置のみのコピーになります。 <pre><code>[javascript:JavaScript]
let obj1 = { a: [0] }
console.log(obj1.a[0]) // 0
let obj2 = Object.assign({}, obj1)
obj2.a[0] = 1
console.log(obj1.a[0]) // 1</code></pre> こうなってしまいます。 これをシャローコピーというそうです。 調べてみるとJavaScriptにディープコピーしてくれる関数はまだ用意されていないようです。 <h2 id="hac84b937d8">JSON.parseとJSON.stringifyを使う方法</h2> <pre><code>[javascript:JavaScript]
let obj1 = { a: [0] }
console.log(obj1.a[0]) // 0
let obj2 = JSON.parse(JSON.stringify(obj1))
obj2.a[0] = 1
console.log(obj1.a[0]) // 0</code></pre> <code>JSON.parse</code>と<code>JSON.stringify</code>は一度jsonに展開してまたオブジェクトに戻す関数です。ただ、プロパティの値にfunctionやundefinedがあるとそのプロパティそのものが消えてしまうので注意してください。 <h2 id="h1afc276a9d">Object.freeze()について</h2> ちなみにオブジェクトは<code>let</code>だろうと<code>const</code>だろうとプロパティの書き換えはできます笑 あとからコピー先でプロパティの書き換えをされても変更しないようにするには<code>Object.freeze()</code>を使います。 <pre><code>[javascript:JavaScript]
let obj1 = { a: 0 }
Object.freeze(obj1)</code></pre> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze" target="_blank" rel="noopener noreferrer">Object.freeze() - JavaScript | MDN</a>

オブジェクトのコピーのやっかいなところ

<h1 id="ha02c2d7083">ファイル転送サービスを作った</h1> ブラウザ間でファイルのやりとりを行えるアプリを作りました。 WebRTCのdataChannelを利用したブラウザ間でのファイルの双方交換ができます。 <a href="https://rts.zatsuzen.com" target="_blank" rel="noopener noreferrer">Real-Time File Transfer</a> <h2 id="h8a3b422e27">できること</h2> ネットワークにつながったPC間でブラウザのみを使ってファイルのやりとりができます。 WebRTCを使うことにより、インターネットやLAN内など、場所を問わず接続できます。 <h2 id="h4e68307198">対応ブラウザ</h2> 現在 WebRTC DataChannel に対応しているブラウザはPC版の Chrome, Firefox, Opera, Safari です。また、Android や iOS の Safari でも使えるはず(未確認)です。 <h2 id="h4d849f4362">使い方</h2> 使い方はとてもシンプルです。 1. トップページから「はじめる」をクリックします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e73a6640dea74bf5b57b4d526b306ffb/blog_rts_rts_start.png" alt=""> 2. サーバからIDが発行されます。 <blockquote>https\://rts.zatsuzen.com/ あなたのID が受信側のURLです。 共有URLをクリックするとクリップボードにコピーします。</blockquote> 3. 表示されている共有URLに他のPC/ブラウザからアクセスします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/8a676e8878bc44918c00341917ac1151/blog_rts_rts_share.png" alt=""> これで自動的に接続が試されます。接続がうまくいくと、dataChannelのラベルが赤から青に変わります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/bc550bc2caa548afac136a3750ed797a/blog_rts_datachannel_ng.png" alt=""><img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/5fc0333ce38740ed826e79f8e625b756/blog_rts_datachannel_ok.png" alt=""> 一度接続されると、共有URLは無効になります。 これ以降はブラウザ同士のみで通信が行われます。 一方のブラウザを閉じると接続は終了します。 3. ファイルを追加、もしくはブラウザへファイルをドラッグ &amp; ドロップします。4. 送信ボタンを押します。 これで相手側のブラウザからダウンロードできます。 相手側のページからも同様にファイルの追加と送信ができます。

ファイル転送サービスを作った

<h1 id="h1838533116">再生時間を表示する</h1> <code>&lt;audio&gt;</code>や<code>&lt;video&gt;</code>を使うと再生時間を表示したいときがあります。でもだいたい単位が秒なので、時と分は計算しなくてはいけません。 簡単ですが時間データから文字列に変換するスクリプトを書きました。 <h3 id="hd0767d8049">ソースコード</h3> <pre><code>[javascript:JavaScript]
function playTime (t) {
 let hms = ''
 const h = t / 3600 | 0
 const m = t % 3600 / 60 | 0
 const s = t % 60
 const z2 = (v) =&gt; {
 const s = '00' + v
 return s.substr(s.length - 2, 2)
 }
 if (h != 0) {
 hms = h + ':' + z2(m) + ':' + z2(s)
 } else if (m != 0) {
 hms = z2(m) + ':' + z2(s)
 } else {
 hms = '00:' + z2(s)
 }
 return hms
}</code></pre> こんな感じ。

再生時間を表示する

<h1 id="h90742858a8">ファイルサイズを取得する</h1> <code>&lt;input type="file"&gt;</code>などで取得したファイルリストには<code>size</code>というプロパティがあり、ファイルサイズが取得できます。しかし単位がバイトなのでそのまま表示するとユーザにとってはわかりにくくなってしまいます。 ファイルサイズは他の単位とは異なり103ごとにSI接頭辞が変わるわけではなく、1KB = 1024byteを元に計算するので少しやっかいです。1024nごとにひとつ大きなSI接頭辞になります。 <h3 id="hd0767d8049">ソースコード</h3> 関数にするとこんな感じ。各SI接頭辞ごとの単位サイズを計算し、それをもとに振り分けるだけですけど。 小数点以下2桁以下は四捨五入していますが、関数<code>round</code>を書き換えていろいろ使えます。 <pre><code>[javascript:JavaScript]
function fileSizeUnit (size) {

 // 1 KB = 1024 Byte
 const kb = 1024
 const mb = Math.pow(kb, 2)
 const gb = Math.pow(kb, 3)
 const tb = Math.pow(kb, 4)
 const pb = Math.pow(kb, 5)
 const round = (size, unit) =&gt; {
 return Math.round(size / unit * 100.0) / 100.0
 }

 if (size &gt;= pb) {
 return round(size, pb) + 'PB'
 } else if (size &gt;= tb) {
 return round(size, tb) + 'TB'
 } else if (size &gt;= gb) {
 return round(size, gb) + 'GB'
 } else if (size &gt;= mb) {
 return round(size, mb) + 'MB'
 } else if (size &gt;= kb) {
 return round(size, kb) + 'KB'
 }
 return size + 'バイト'
}</code></pre>

ファイルサイズを取得する

<h1 id="h214c899e60">data channel</h1>一般的に WebRTC といえば音声や映像を Peer to Peer で接続することでサーバを介さずに通話ができるというプロトコルですが、 media stream を送るだけが WebRTC ではありません。 RTCDataChannel API を使えば、ピア同士でデータのやりとりを行うことができます。 <h2 id="h33ae2bc092">Chromeでデータが送れなくなる</h2>前置きはこんなもんで、本題です。チャットや軽いデータならば一度の<code>send</code>で送信できるのですが、今回は重いデータの送信を試していました。 <pre><code>dataChannel.send(contents)</code></pre> RTCDataChannel API の<code>send</code>メソッドでは一度に送信できるサイズに制約があり、困ったことにブラウザごとに異なり、さらに受信側も挙動がまちまちなようです。ブラウザー間の差異を吸収するには、16キロバイト以下になるように分割し送信する必要があります。 ここでは分割するスクリプトはここでは省略しますが、だいたい50MBで3000個くらいになります。 これを<code>while</code>や<code>for</code>などを使って連続的に送るのですが、Chromeで試してみたところなぜか途中でぱったりと送信が止まるのです。Connectionも正常なままで謎でしたが、<code>RTCDataChannel.bufferedAmount</code>をみてみると 16384 になると止まるようです。 そこで、<code>RTCDataChannel.bufferedAmount</code>が0以上になったら送信を待機するようにしたら最後まで送信できるようになりました。 Firefoxでは<code>bufferedAmount</code>がいくつになっても大丈夫でした。 ちなみに<code>while</code>や<code>for</code>を使うとタスクを占有してしまってレンダリングされなくなるので、最終的に<code>setTimeout</code>を使って末尾回帰するような関数を書きました笑 <blockquote>2019年2月1日追記 これ再現しなくなりました...。バグだったのかな？</blockquote>

Chromeでdata channelを使って大量にデータを送ると途中で止まる

<h1 id="hce8e0f4909">Blobを使うとChromeがエラーになる</h1> 5MB程度のファイルを<code>Blob</code>を使ってChromeからファイルとして出力しようと思ったが、Chromeがクラッシュしてしまい、うまくいかない。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/7ef4457d8e9c4d28978b92205e1686f2/javascript_blob-error_blob-chrome-error.png" alt=""><img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/bdf41c08c1be4ba380b009c9ad7fcee8/javascript_blob-error_blob-dev-error.png" alt=""> というか小さなサイズのファイルでも正しい形式にならない。 データをUint8Array型からファイルに変換するときの失敗例 <pre><code>[javascript:JavaScript]
const data = new Uint8Array(fileObject)
const blob = new Blob(data, {type: 'text/plain'})</code></pre> <h2 id="h26b83d0ec1">配列でないとダメ</h2> Uint8Array型は配列だと思ってたのですが、さらに配列に入れてやらないとダメらしい。 <code>[]</code>で囲むだけでうまくいきました。 <pre><code>[javascript:JavaScript]
const blob = new Blob([data], {type: 'text/plain'})</code></pre> <h2 id="h20606edc3d">ファイルのダウンロード</h2> ちなみに、これをブラウザからダウンロードさせるときは、以下のようにして、URLを作成します。 <pre><code>[javascript:JavaScript]
const url = window.URL.createObjectURL(blob)</code></pre> これを<code>&lt;a&gt;</code>タグの<code>href</code>に指定してあげればOK。 ていうかよく見たらMDNにちゃんと書いてあった。 <a href="https://developer.mozilla.org/ja/docs/Web/API/Blob" target="_blank" rel="noopener noreferrer">Blob | MDN</a>

Blobエラーで困った

<h1 id="h336eacfc41">socket.id-clientを使っていてsocket接続後IDが取得できない</h1> socket.ioを使ってクライアントとサーバの接続状態を確認するコードを書いていた。<code>console.log</code>にて<code>socket</code>を出力していて、こちらの<code>connected</code>プロパティは<code>true</code>になっているが、<code>socket.id</code>を出力すると<code>undefined</code>になってしまう。 <pre><code>[javascript:JavaScript]
import socketio from 'socket.io-client'

const socket = await socketio.connect('https://192.168.1.2:3000/', {secure: true})
console.log(socket, socket.id)</code></pre> <h2 id="h379ab7cace">よくわからないが接続できていない</h2> 詳しく調べていないのでよくわからないままだが、<code>connect</code>イベントをひろってやると取得できた。 <pre><code>[javascript:JavaScript]
import socketio from 'socket.io-client'

const socket = await socketio.connect('https://192.168.1.2:3000/', {secure: true})
socket.on('connect', () =&gt; {
 console.log(socket, socket.id)
})</code></pre> <code>connected</code>プロパティが<code>true</code>でも繋がっていないことがあるのだろうか。

socket.ioでidが取得できない

<h1 id="h0aa4eee83f">Reactとは</h1> ReactはJavaScriptのフレームワークのひとつで、もともとはFacebookで利用するためにFacebookが開発したものです。最近ではjQueryに代わるフレームワークとして注目を集め、Reactに置き換えるWebサイトも多くあります。 Reactはいまでは様々なホームページで使われていますが、見ただけではわかりません。 今回はホームページにReactが使われているか確認する方法を紹介します。 <h2 id="h19047066cc">Reactが使われているか確認する</h2> <h3 id="hcd75268028">React Developer ToolsをChrome拡張に追加する</h3> WebサイトにReactが使われているか確認するにはChromeにReact Developer Toolsを追加します。 <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja" target="_blank" rel="noopener noreferrer">React Developer Tools - Chrome ウェブストア</a> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/4c472d3f31ca4f2b867c10c42081fcd7/react_check-react_chrome-webstore.png" alt=""> 「Chromeに追加」をクリックします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/095bd37d995d41ae93b864d3babdfcc3/react_check-react_add-chrome.png" alt=""> 「拡張機能を追加」をクリックします。 これだけ。 アドレスバーの横にアイコンが追加されます。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e15bb26f26d04653b6f525c80379ac1f/react_check-react_icon-not.png" alt=""> <h3 id="hb989abdf8d">表示されるアイコンの種類</h3> Reactが使用されているページは以下のアイコン。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/8afc6494808c431cbd042970bfffafff/react_check-react_icon-prod.png" alt=""> <blockquote>This page is using the production build of React.</blockquote> 使われていないページだとグレーアウトします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e15bb26f26d04653b6f525c80379ac1f/react_check-react_icon-not.png" alt=""> <blockquote>This page doesn't appear to be using React.</blockquote> Reactには<code>develop build</code>と<code>production build</code>があって、developの状態だとこのアイコンになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/a66f5ef378e24713baf62537f2b44d60/react_check-react_icon-dev.png" alt=""> <blockquote>This page is using the development build of React.</blockquote> 古いバージョンのReactを使っているサイトは以下のアイコンになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/b4f413d9ede94a7ca2feeb638b0618fb/react_check-react_icon-old.png" alt=""> <blockquote>This page is using an outdated version of React.</blockquote> <h2 id="h9683392855">React Developer Toolsについて</h2> React Developer Toolsは、もともとReactの開発補助のためのChrome拡張機能です。 Reactの開発に便利なStateやコンポーネントの状態の確認などができ、かなり高機能な拡張機能です。 <h3 id="hf50973b858">Development Build と Production Build</h3> Development Buildのままだとmapファイルが作成され、セキュリティも弱くなるので、デプロイするときはかならずProduction Buildにしましょう。 <h4 id="he0625ed872">Create React App</h4> <code>Create React App</code>を使用しているプロジェクトは以下のコマンドを使用します。 <pre><code>[shell:shell]
# npm run build</code></pre> <h4 id="h0123682dfe">webpack</h4> <code>webpack</code>を使用してbuildする場合は設定ファイルで<code>mode: 'production'</code>を指定しましょう。 <pre><code>[javascript:webpack.js]
module.exports = {
 mode: 'production'
}</code></pre> 参考: <a href="https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up" target="_blank" rel="noopener noreferrer">react-devtools | GitHub</a>

WebサイトにReactが使われているか確認する

<h1 id="h0aa4eee83f">Reactとは</h1> ReactはJavaScriptのフレームワークのひとつで、もともとはFacebookで利用するためにFacebookが開発したものです。 Google製のAngularや、そこから分岐した(というと語弊があるけど)Vue.jsと並び、比較的新しい部類の三大フレームワークに数えられ、数あるJavaScriptのフレームワークの中でもよく使われる部類になると思います。 どのフレームワークにも向き不向きがあり適した用途など考察することもできますが、それぞれについて細かくはここでは触れません。 トレンドの移り変わりが激しいといわれるフロントエンドフレームワーク界隈ですが、2016年以降はわりとこの3つに落ち着いている感じもありますね。私はReactが一番気に入ってるので、Reactを使っています。 <h2 id="hbf58b86606">jQueryに代わるフレームワークReact</h2> JavaScriptのフレームワークといえば、jQueryが主流の時代がありました。 というか、jQueryは今でも根強い人気があり、未だに新規案件で採用されるなど注目を集めています。 しかし、問題点や課題が多く、いまどきをうたうプロジェクトなどはReactなど新しいフレームワークの採用事例も増えています。 例えば、<a href="https://qiita.com" target="_blank" rel="noopener noreferrer">Qiita</a>など。 置き換えられるのだから似てるのかな、と思いきやかなり別物です。特にふんわり触っているうちは全く別のものに見えると思います。 jQueryはピュアなJavaScriptを拡張するフレームワークというイメージで、アニメーションが得意分野でした。これがReactに置き換えようという流れは、JavaScriptの歴史の変遷と関連があります。 <h3 id="hbe9ef0117d">jQueryとJavaScriptの歴史</h3> かつてWebサイトといえばサーバからデータをダウンロードしてきて、そのまま表示するだけでした。 時代が変わり、必ずしも静的なWebサイトだけではなくなりました。各ユーザや状態に合わせて動的にWebサイトを書き換える必要が出てきます。 Cookieなどを駆使してサーバサイドでPHPなどを利用する手段もありますが、XMLHttpRequest(Ajax)の登場によってJavaScriptを介してWebサイトがサーバとやりとりすることができるようになりました。これにより、最初のアクセスではWebサイトの中身を受信せず、後からデータを取得する方法も普及していきました。 これを簡単に実装できたのもjQueryが普及した要因の一端だと思います。 <h3 id="hc9c9c46533">jQueryの課題</h3> しかし、Webサイト(Webアプリケーション)をjQueryで実装するには複雑になるほど読みにくくなるという難点があります。 サーバから取得したデータを対象のDOMに反映するのがjQueryの役目ですが、1つのデータについて、書き換える対象のDOM(HTML)とjQueryのスクリプトと、2か所に記述が必要になります。 1件の修正に対して2か所の変更が必要になり、複雑なアプリケーションになるともうわけがわからなくなります。 <h3 id="h248eb0c7f9">Reactの登場</h3> ReactはjQueryとはまったく異なるアプローチで、UIをばらばらの独立したパーツ(コンポーネント)として扱います。細かくコンポーネントを分けることで再利用したり、多層化したりすることができます。なによりReactによりコンポーネントのスクリプトを1か所にまとめることができ、可読性が格段に上がります。仮想DOMにより、データの変更したい部分のみ再レンダリングを行うことで、高速化も実現しました。 <h3 id="hbc784e2cde">Reactの煩雑面</h3> 素晴らしい面が多いReactですが、jQueryに対して面倒な部分もあります。jQueryは基本的にフレームワークのコードを読み込むことで利用可能で、テキストエディタとブラウザさえあれば開発可能です。Reactはnpmを導入したりWebpackやトランスパイラなど周辺環境を揃えるのがまず手間です。 しかもプロジェクトの構成には正解がなく、作っているうちにこれは正しいのかなど疑心暗鬼になります笑 <h3 id="h4d8d357b35">いまどきのReactプロジェクト</h3> 複数のファイルをHTMLで読み込むのではなく、webpackやBabelを使ってひとつのファイルにまとめる方法が主流です。 <h2 id="ha214098e44">まとめ</h2> 何がいいたいのかわからん記事になってしまいました。 とりとめのない記事なので後でまた書き直せるといいな。

Reactを始めてみる

<h1 id="h007bad4a5e">audioファイルの読み込み量を取得する</h1> [前回](../audio-seekbar)、シークバーを追加する方法を紹介しました。 今回は、そのシークバーでオーディオファイルの読み込み状況がわかるようにします。 <h2 id="h73403726cb">読み込み量を表示</h2> Webでオーディオを扱うときは、使うmp3ファイルは必ずしもローカルにあるわけではなく、同じくWebから取得すると思います。 当然ダウンロードには時間がかかるので、再生ボタンを押してから無反応になってしまうとUXは低下してしまいます。 読み込み量は<code>onprogress</code>イベントが発生しているときに<code>buffered</code>属性から<code>TimeRanges</code>オブジェクト形式として取得できます。 <h3 id="ha1ca45811a">HTMLの追加</h3> 新しく<code>#loading</code>要素を追加します。 <pre><code>[html:HTML]
&lt;div id="loading"&gt;&lt;/div&gt;</code></pre> <h3 id="h7c923cf2a5">CSSの追加</h3> <code>#loading</code>は<code>#seekbar</code>とCSSを共有しています。参考: [前回](../audio-seekbar) <pre><code>[css{1}:CSS]
#seekbar, #loading {
 width: 160px;
 height: 10px;
 margin: 1em;
 border-radius: 5px;
 background: linear-gradient(#ccc, #ccc) no-repeat #eee;
}</code></pre> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/1f5954141b6a42aa8b69a85b9ca0cca6/javascript_audio-loading_controls-005.png" alt=""> こんな感じ。<code>background-color</code>を透過させてシークバーと読み込みプログレスバーを重ねてもいいですね。 <h3 id="h4f20a2476c">JavaScriptの追加</h3> audio.onprogressに直接追加します。 <pre><code>[javascript:JavaScript]
audio.onprogress = function () {
 if(audio.buffered.length &gt; 0){
 const percent = Math.round((audio.buffered.end(audio.buffered.length-1)/audio.duration)*1000)/10
 document.getElementById('loading').style.backgroundSize = percent + '%'
 }
}</code></pre> これで読み込みの状況も確認できるようになりました。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/a15e80f8f5c546f99f717e2678347ed5/javascript_audio-loading_controls-006.png" alt=""> <code>&lt;audio&gt;</code>タグはストリーミング再生なので、完全にダウンロードされてから再生されるのではなく、再生速度をみながら、ここまで読み込めばあとは再生中にダウンロードできると判断した時点から再生開始されます。 そのへんはブラウザがいい感じにやってくれます。 ちなみにそのときは<code>oncanplaythrough</code>などのイベントが発火します。 <h2 id="ha214098e44">まとめ</h2> 最後にここまでをひとつにまとめたものです。長くなってきちゃいましたね。 <pre><code>[html:index.html]
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;HTML5のAudioタグテスト&lt;/title&gt;
 &lt;style&gt;
 audio {
 display: none
 }
 #play, #stop {
 display: inline-block;
 width: 60px;
 height: 60px;
 margin: 1em;
 border-radius: 50%;
 background: #ddd;
 text-align: center;
 line-height: 60px;
 cursor: pointer;
 }
 #play:hover, #stop:hover {
 background: #eee;
 }
 #time {
 margin: 0 1em;
 }
 #current, #duration {
 padding: 0;
 margin: .2em;
 }
 #seekbar, #loading {
 width: 160px;
 height: 10px;
 margin: 1em;
 border-radius: 5px;
 background: linear-gradient(#ccc, #ccc) no-repeat #eee;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div&gt;
 &lt;audio src="sample.mp3"&gt;&lt;/audio&gt;
 &lt;div id="play"&gt;Play&lt;/div&gt;
 &lt;div id="stop"&gt;Stop&lt;/div&gt;
 &lt;div id="time"&gt;
 &lt;span id="current"&gt;00:00&lt;/span&gt;
 &lt;span id="duration"&gt;00:00&lt;/span&gt;
 &lt;/div&gt;
 &lt;div id="loading"&gt;&lt;/div&gt;
 &lt;div id="seekbar"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;script&gt;
 const audio = document.getElementsByTagName("audio")[0]
 const playButton = document.getElementById("play")
 const stopButton = document.getElementById("stop")
 playButton.addEventListener('click', () =&gt; {
 if (audio.paused) {
 audio.play()
 play.innerHTML = play.innerHTML === 'Play' ? 'Pause' : 'Play'
 } else {
 audio.pause()
 play.innerHTML = 'Play'
 }
 })
 stopButton.addEventListener('click', () =&gt; {
 audio.pause()
 audio.currentTime = 0
 })
 audio.onprogress = function () {
 if(audio.buffered.length &gt; 0){
 const percent = Math.round((audio.buffered.end(audio.buffered.length-1)/audio.duration)*1000)/10
 document.getElementById('loading').style.backgroundSize = percent + '%'
 }
 }
 audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if(!isNaN(duration)){
 document.getElementById('current').innerHTML = playTime(current)
 document.getElementById('duration').innerHTML = playTime(duration)
 const percent = Math.round((audio.currentTime/audio.duration)*1000)/10
 document.getElementById('seekbar').style.backgroundSize = percent + '%'
 }
 })
 document.getElementById('seekbar').addEventListener("click", (e) =&gt; {
 const duration = Math.round(audio.duration)
 if(!isNaN(duration)){
 const mouse = e.pageX
 const element = document.getElementById('seekbar')
 const rect = element.getBoundingClientRect()
 const position = rect.left + window.pageXOffset
 const offset = mouse - position
 const width = rect.right - rect.left
 audio.currentTime = Math.round(duration * (offset / width))
 }
 })
 function playTime (t) {
 let hms = ''
 const h = t / 3600 | 0
 const m = t % 3600 / 60 | 0
 const s = t % 60
 const z2 = (v) =&gt; {
 const s = '00' + v
 return s.substr(s.length - 2, 2)
 }
 if(h != 0){
 hms = h + ':' + z2(m) + ':' + z2(s)
 }else if(m != 0){
 hms = z2(m) + ':' + z2(s)
 }else{
 hms = '00:' + z2(s)
 }
 return hms
 }
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> とりあえずオーディオプレイヤーを作るシリーズはこれでいったん終わりにします。 HTMLMediaElementの属性やメソッドはMDNのまとめが参考になります。 参考: <a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement" target="_blank" rel="noopener noreferrer">HTMLMediaElement | MDN</a> なにかご意見などありましたらTwitterまでお願いいたします。

ゆったりWeb手帳

気になったことをのんびり書くよ