<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までお願いいたします。

audioファイルの読み込み量を表示する

<h1 id="h42b5e30b4c">シークバーを作る</h1> <a href="/posts/javascript_audio-player">前回</a>までは再生・停止ボタンと再生時間の表示を作りました。 <h2 id="h8c0f39d58a">シークバーとは</h2> シークバーは、再生中の楽曲のどの部分なのかを表示するUIで、操作することで再生時間の変更ができる機能のことです。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/057036b9030c49cdad636d0da0bba6f5/javascript_audio-seekbar_seekbar-sample.png" alt=""> これを追加します。 <h3 id="ha1ca45811a">HTMLの追加</h3> <code>#seekbar</code>という要素を追加します。 <pre><code>[html:HTML]
&lt;div id="seekbar"&gt;&lt;/div&gt;</code></pre> <h3 id="h7c923cf2a5">CSSの追加</h3> <pre><code>[css:CSS]
#seekbar {
 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/785992565bfa4552b9c00440ddbcb858/javascript_audio-seekbar_controls-003.png" alt=""> このままだとしょぼいので、ちゃんとプレイヤーを作るときはCSSでうまく作ってください！笑 <h3 id="hcadb99ac2a">JavaScriptを編集</h3> <code>timeupdate</code>のイベントに以下の2行を追加します。 <pre><code>[javascript{9,10}:JavaScript]
const audio = document.getElementsByTagName("audio")[0]

audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if (!isNaN(duration)) {
 document.getElementById('current').innerHTML = current
 document.getElementById('duration').innerHTML = duration
 const percent = Math.round((audio.currentTime/audio.duration)*1000)/10
 document.getElementById('seekbar').style.backgroundSize = percent + '%'
 }
})</code></pre> <h2 id="ha4e4e52441">このシークバーの仕組み</h2>CSSの<code>background: linear-gradient(#ccc, #ccc) no-repeat #eee;</code>がポイントです。<code>background-image</code>に<code>linear-gradient</code>が指定され、<code>background-color</code>に<code>#eee</code>が指定されています。<code>background-size</code>はCSSからは指定しません。<code>background-size</code>は<code>background-image</code>の幅を変更できますので、これをJavaScriptから変更することで、再生位置を表示します。 参考: <a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-size" target="_blank" rel="noopener noreferrer">background-size | MDN</a> <h2 id="h88f9522244">再生位置の移動</h2> 通常のシークバーはシークという名の通り再生位置を変更できます。 シークバーをクリックした位置を取得してそこから再生時間を計算します。 <pre><code>[javascript:JavaScript]
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))
 }
})</code></pre> 要素がクリックされたときにクリックされた座標と要素のサイズから割合を出します。<code>currentTime</code>属性に代入することでシークすることができます。 <h2 id="ha214098e44">まとめ</h2> だいぶプレイヤーっぽくなってきました。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/d18eb356a17e41aab214081425c66aaa/javascript_audio-seekbar_controls-004.png" alt=""> 最後にここまでをひとつにまとめたものです。 <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 {
 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="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.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>

audioプレイヤーをシークバーで操作する

<h1 id="hb2cf465d5e">オリジナルオーディオプレイヤー</h1> <a href="/posts/javascript_audio-tag">前回</a>はオーディオを再生、一時停止するところまで作りました。次はプレイヤーっぽくしましょう。 <h2 id="hb4dd4545d4">再生時間の表示</h2> オーディオを再生するのであれば時間の表示は欲しいですよね。時間を表示する要素を追加します。HTMLは好きな場所に追加してください。必要なのは<code>id</code>属性だけです。 <h3 id="ha1ca45811a">HTMLの追加</h3> <pre><code>[html:HTML]
&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;</code></pre> <h3 id="h7c923cf2a5">CSSの追加</h3> <pre><code>[css:CSS]
#time {
 margin: 0 1em;
}
#current, #duration {
 padding: 0;
 margin: .2em;
}</code></pre> はい！できました。左側が現在の時間で右側が全体の再生時間です。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/513b8033367342e688d6a63c62bfc6d0/javascript_audio-player_controls-002.png" alt=""> <h3 id="h23fb360eb1">JavaScriptの編集</h3> これをJavaScriptでaudioタグから情報をもらって更新します。現在時刻と再生時間は<code>audio.currentTime</code>と<code>audio.duration</code>で取得できますが、そのタイミングのデータしか得られません。audio再生中は<code>timeupdate</code>イベントが起こるのでそれを拾ってそれぞれ取得・更新します。 <code>duration</code>はたまに<code>null</code>になったりするので数字かどうかを確認します。 <pre><code>[javascript:JavaScript]
const audio = document.getElementsByTagName("audio")[0]

audio.addEventListener("timeupdate", (e) =&gt; {
 const current = Math.floor(audio.currentTime)
 const duration = Math.round(audio.duration)
 if (!isNaN(duration)) {
 document.getElementById('current').innerHTML = current
 document.getElementById('duration').innerHTML = duration
 }
})</code></pre> 1秒間に4回くらい<code>timeupdate</code>が走ります。 <h3 id="h90811430bc">再生時間表示用関数</h3> <code>audio</code>から取得できる時間データは秒ですので、<code>mm:ss</code>形式に直す関数を用意します。 <pre><code>[javascript{24,25}: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
}

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)
 }
})</code></pre> <h2 id="h5538f1472c">再生ボタンの機能変更</h2> <a href="unsafe:../audio">前回</a>作ったコントローラは再生と停止(一時停止)ボタンを別にしていましたが、それらを1つのボタンにまとめ、停止ボタンは停止と曲頭に戻るようにします。 再生ボタンが押されたときに、audioが再生しているかをみて再生中であれば一時停止、一時停止中であれば再生します。ついでに再生ボタンの文字も変えます。また、停止ボタンを押すと曲の頭に戻ります。 <pre><code>[javascript:JavaScript]
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
})</code></pre> <h2 id="ha214098e44">まとめ</h2> オーディオ再生に加え、再生時間の表示ができました。 次はシークバーを追加したいと思います。 ここまでをひとつのHTMLにまとめるとこんな感じ。 <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;
 }
 &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&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.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)
 }
 })

 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>

オリジナルのaudioプレイヤーを作る

<h1 id="hc1bda9749e">Webでオーディオ再生</h1> ホームページ上で音楽を流す方法はいくつかあります。 最も手っ取り早いのはHTML5で追加された<code>audio</code>タグを使う方法です。これにはブラウザ標準のコントローラが使えるのでとても手軽です。 HTMLに<code>audio</code>タグを書くだけ。 <pre><code>[html:HTML]
&lt;audio src="sample.mp3" controls&gt;&lt;/audio&gt;</code></pre> Google Chrome 71ではこのようになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/6f866bb6bf544cf9a4582fd3bdebe021/javascript_audio-tag_audio-controls-chrome.png" alt=""> めちゃくちゃ簡単です。 しかし、標準コントローラはブラウザごとにUIが異なるのでホームページでデザインを統一したい時などに厄介です。例えば、Edgeのコントローラはこんな感じ。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/3f54634c10d249d3b3e9aa71b9745ad7/javascript_audio-tag_audio-controls-edge.png" alt=""> サイズも結構違って、Chromeは 300 x 54、Edgeは 300 x 30 です。 単純に音楽を流したいだけならこの方法が最も手軽です。 参考: <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio" target="_blank" rel="noopener noreferrer">&lt;audio&gt;: 埋め込み音声要素 | MDN</a> <blockquote>WebでAudioを扱うもうひとつの方法はWeb Audio APIを使います。こちらは改めて書こうと思います。</blockquote> <h2 id="h2fc24cd80b">オリジナルコントローラを作る</h2> とりあえず、ブラウザ標準のコントローラが気に入らないので、オリジナルのものを作成しましょう。 <code>audio</code>タグでコントローラを使わずに操作するにはJavaScriptを使う必要があります。要素の<code>onClick</code>を元にJavaScriptを介して<code>audio</code>タグを操作します。 <h3 id="h9f7ee0926a">HTMLを編集</h3> 全体を<code>div</code>で囲ってコントローラのボタンとなる要素を追加します。<code>div</code>をボタンにしてますが、別になんの要素でも構いません。 <pre><code>[html:HTML]
&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&gt;</code></pre> <h3 id="h3e570790fd">CSSを追加</h3> <code>div</code>要素をボタンっぽくします。<code>audio</code>タグに<code>controls</code>を書かなければだいたいコントローラは消えますが念のためCSSでも消します。 <pre><code>[css:CSS]
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;
}</code></pre> 再生ボタン用にアイコンを作ったり、<a href="https://fontawesome.com" target="_blank" rel="noopener noreferrer">Font Awesome</a>などを使うのも良いですね。 今回は適当プレイヤーなのでダイレクトにPlayと書きます笑 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/95fcf06c5ecd45e685ed5ffb929e894b/javascript_audio-tag_controls-001.png" alt=""> <h3 id="h4a853fe769">JavaScriptを追加</h3> JavaScriptで要素のクリックから<code>audio.play()</code>を呼び出せば良いだけです。 <pre><code>[javascript:JavaScript]
const audio = document.getElementsByTagName("audio")[0]
const playButton = document.getElementById("play")
const stopButton = document.getElementById("stop")

playButton.addEventListener('click', () =&gt; {
 audio.play()
})

stopButton.addEventListener('click', () =&gt; {
 audio.pause()
})</code></pre> <h2 id="ha214098e44">まとめ</h2> これで要素からaudioタグを操作し、音楽を再生・停止(一時停止)することができます。オリジナルのコントローラはこれだけでは機能不十分ですのでさらに追加していきます。 ここまでをひとつのHTMLにまとめるとこんな感じ。 <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;
 }
 &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&gt;
 &lt;script&gt;
 const audio = document.getElementsByTagName("audio")[0]
 const playButton = document.getElementById("play")
 const stopButton = document.getElementById("stop")
 playButton.addEventListener('click', () =&gt; {
 audio.play()
 })
 stopButton.addEventListener('click', () =&gt; {
 audio.pause()
 })
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> 初めての技術解説(？)投稿ですが、どこまで詳しく書くのかしっかり決めてから書き始めないとだめですね。ちょっと細かく書きすぎたので次はもうちょっと適当に書きます。

HTML5のaudioタグを使って音楽を再生する

<h1 id="h0f67b71d5d">LAME MP3 Encoder</h1>Linuxでディレクトリ内のwavファイルをすべてmp3ファイルに変換するシェルスクリプトです。 <pre><code>[shell:lame.sh]
#!/bin/sh

find ~/music/ -name *.wav | while read file; do
 lame -V2 "$file" "${file%.wav}.mp3"
 rm -v "$file"
done</code></pre> このスクリプトは指定ディレクトリ(<code>~/music/</code>)以下の<code>*.wav</code>ファイルを探し、ひとつずつ<code>lame</code>を実行します。実行後、もとの<code>*.wav</code>ファイルは削除します。この例ではVBRのオプション(<code>-V2</code>)を指定しています。 <h3 id="ha9285a982d"><code>lame</code>のオプション</h3> <h4 id="h27bf77d22f">固定ビットレート(CBR)</h4><code>-b</code>に続いてビットレートを指定する<pre><code>[shell]
lame -b 192 sample.wav</code></pre> <h4 id="h929d58c996">可変ビットレート(ABR)</h4><code>--abr</code>に続いてビットレートを指定する。<pre><code>[shell]
lame --abr 192 sample.wav</code></pre> <h4 id="h1ef05eb287">可変ビットレート(VBR)</h4><code>-V</code>に続いてスペースを挟まず品質を指定する。品質は0から10までで小数点以下まで指定可能。0が最も品質が高く容量が多くなる。 <pre><code>[shell]
lame -V2 sample.wav</code></pre>

ゆったりWeb手帳

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