<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>

lameで特定のディレクトリ以下のファイルをmp3にする

<h1 id="h22a4067eb8">Gatsbyとは</h1>GatsbyはReactをベースにしていてとにかく爆速なのが売りのようです。基本的なプロジェクトのStarterが用意されていて、機能を追加したいときはPluginを追加していく、という感じです。やりたいことに対してPluginがないときはどうすればいいのでしょうか...。自分で作るのかな？ Reactのみで作成したアプリケーション(SPA)では、SEOの観点から少し難があります。head内のmetaタグを動的に変えるには<a href="https://github.com/nfl/react-helmet" target="_blank" rel="noopener noreferrer">react-helmet</a>を使いますが、JavaScriptが実行される必要があり、ページアクセス時に取得されるHTMLには反映されず、正しくインデックスされるのか疑問です。 Gatsbyでは公開前にbuildし各ページを生成しておくので、その辺もいい感じに対応してくれています。 <h3 id="h3d4c031cb2">Gatsbyのメリット</h3><ul><li>とにかく速い</li><li>外観が100%自由に作成できる</li><li>ブラウザから編集できない</li><li>ReactアプリよりSEOに強い気がする</li></ul> <h3 id="h17d34280d9">Gatsbyのデメリット</h3><ul><li>速すぎる</li><li>フロントエンドの知識がいる気がする</li><li>ビルドの流れがよくわからない</li><li>CLIが使えないとだめ</li></ul> <h1 id="h64aacec53f">Gatsbyを使う</h1> なにはともあれGatsbyを使うには`gatsby`コマンドが必要なので使えるようにします。 <pre><code>[shell]
# npm i -g gatsby-cli</code></pre> <code>-cli</code>をつけないとGatsby本体が来ちゃうので気を付けてください。 ブログのベースは<a href="https://github.com/gatsbyjs/gatsby-starter-blog" target="_blank" rel="noopener noreferrer">gatsby-starter-blog</a>です。 <pre><code>[shell]
// gatsby new [プロジェクト名] [ベースのダウンロード先]
# gatsby new blog-starter https://github.com/gatsbyjs/gatsby-starter-blog</code></pre> <code>blog-starter</code>ディレクトリができるので、移動して<code>develop</code>コマンドでブラウザからアクセスできます。 <pre><code>[shell]
# cd blog-starter
# gatsby develop
// http://localhost:8000</code></pre> もし、ローカルLANからアクセスする場合は以下のオプションをつけます。 <pre><code>[shell]
# gatsby develop -H 192.168.1.2 -p 8000
// http://192.168.1.2:8000</code></pre> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/83991fdc9fb64088b8b8cd1cbc039ae1/gatsby_how-to-use_blog-starter-sample.png" alt=""> <h2 id="he76eaaf984">プロジェクトディレクトリの構成</h2> プロジェクトディレクトリの構成は以下のような感じになっています。 <pre><code>[text]
├─ content // コンテンツ置き場
│&nbsp;&nbsp; ├─ assets // 画像ファイル
│&nbsp;&nbsp; └─ blog // 記事ファイル
├─ gatsby-browser.js
├─ gatsby-config.js // プロジェクトの設定ファイル
├─ gatsby-node.js // developやbuildの時に実行される
├─ LICENSE
├─ node_modules
├─ package.json
├─ package-lock.json
├─ public
├─ README.md
├─ src // ページ構成のファイル
│&nbsp;&nbsp; ├─ components
│&nbsp;&nbsp; ├─ pages
│&nbsp;&nbsp; ├─ templates
│&nbsp;&nbsp; └─ utils
└─ static
 ├─ favicon.ico
 └─ robots.txt</code></pre> <code>./content/blog</code>以下に置いたファイルが自動的にルーティングされます。 <code>gatsby develop</code>や<code>gatsby build</code>を行うと<code>./src</code>以下のファイルを読み込んで各ページが自動的に生成されます。 <h2 id="h9dcc071ccd">デプロイ</h2> Gatsbyプロジェクトのデプロイ方法はいくつかありますが、ここでは一般的なLinuxサーバで配信する場合の実行方法を紹介します。 デプロイには今回は<a href="http://pm2.keymetrics.io/" target="_blank" rel="noopener noreferrer">pm2</a>を使います。開発サーバとデプロイするサーバが別の場合には<code>gatsby-cli</code>もインストールします。(Nodeアプリをデーモン化する方法は他にも<a href="https://github.com/foreverjs/forever" target="_blank" rel="noopener noreferrer">forever</a>などがあります。) <pre><code>[shell]
# npm i -g pm2</code></pre> プロジェクトディレクトリ内にpm2の設定ファイルを配置します。 <pre><code>[yml:pm2config.yml]
name: blog
script: gatsby serve</code></pre> json形式で<code>.json</code>ファイルにしても構いません。 以上で準備が整いました。 <pre><code>[shell]
# gatsby build
# pm2 start pm2config.yml --name 'blog'</code></pre> これで、デフォルトの設定であれば9000番ポートに公開されます。Webサーバを別で立てている場合はプロキシを通してください。 記事を更新したい時は、<code>content</code>ディレクトリにコピーしてから<code>gatsby build</code>を実行すればOKです。

ゆったりWeb手帳

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

lameで特定のディレクトリ以下のファイルをmp3にする

LAME MP3 Encoder

`lame`のオプション

固定ビットレート(CBR)

可変ビットレート(ABR)

可変ビットレート(VBR)

lameで特定のディレクトリ以下のファイルをmp3にする

LAME MP3 Encoder

lameのオプション

固定ビットレート(CBR)

可変ビットレート(ABR)

可変ビットレート(VBR)

`lame`のオプション