読者です 読者をやめる 読者になる 読者になる

まるまるまるめっと

なんてことない雑記

スポンサーリンク

ブログに音声ファイル(mp3)を埋め込む方法

音声ファイル

ちわっす、なわはるです。前に陸さんだっけな?今日のBGMはこれだ!っていってYouTube動画を貼ってたの。今日はそれの本格的なやつを紹介したいと思います。サブブログで書いてたんだけど、あそこ物置みたいになってるから、もっかい書きます。

 

nawaharu.hatenablog.jp

<audio>タグとhttp~.mp3

HTMLには音声をいれるコードとして、<audio>タグというものがあります。

基本コードはこんな感じ。

<audio src="音声ファイルのURL" controls="controls"></audio>

 あれ?見たことあるって思った人いるんじゃないかな?

そうiTunes埋め込みも<audio>タグを使っているんだ。




音声ファイルのURLってことは、絶対URL(HTTP、HTTPS)から始まって拡張子音声ファイル(MP3)で終わるやつ(http:~.mp3)がいる。

たとえば、フリーBGMのサイトから取ってきたやつを埋め込んでみると、

引用: 疾走感音楽素材 | フリー音楽素材「甘茶の音楽工房」:残業戦士




こんな感じになる、自作の音声ファイルをいれたい場合はウェブリブログってところをアップローダーとして使うといいよ。

ウェブリブログ:機能充実のブログが無料!手軽にブログを始めよう!




試しにやってみたのが、これ。

この声ね。私の声じゃないんだ、ごめんね。実をいうとTwitterでお願いした人の声、中学2年生だったかな?いちごちゃんって名前の子なんだ。


で、<audio>タグだけど、いろいろ追加コードがある。たとえば、再生ボタンを押さなくても自動で音声が再生されるやつ。

 autoplay="autoplay"

 このコードははっきりいって危険だ。ページを移動するたびに勝手に再生されるので、私がこのブログを書いてるとき【編集】と【HTML編集】を言ったりきたりするたびに重なって再生されてるからカオスなことになってる。

 

他にはここに載ってるから見てみるといいよ。

<audio>-HTML5タグリファレンス

 

私はウェブリブログをアップローダーとして使う方法を見つけたからそれでいいんだ。機会があったら、いろいろ試してみたい。

ということで今回はここまで。

なわはるでした!