ホームページに音声や音楽の埋め込み方


自分で作成した音声や音楽をホームページやブログに埋め込みたい

自分で作成した音声や音楽をホームページやブログに埋め込みたいと考えている方は多いのではないでしょうか?

今回は、ブラウザ内蔵の音楽プレーヤーで再生できる簡単な埋め込み方法をお伝えいたします。

audio要素を使えば音声埋め込みは簡単

HTML5で新たに追加された要素の一つに、音楽・音声データを扱うaudio要素があります。

ソースを記述する必要があるのですが、とても簡単です。

ソースという言葉を聞いただけで、私にはできないと思う方もいらっしゃるかもしれませんが、簡単ですのでチャレンジしてみてください。

この方法は、外部プラグインを用意する必要がなく、ブラウザ内蔵の音楽プレーヤーで、コントロール(音楽プレーヤー)が表示され、音楽の再生・停止などの操作ができるのでユーザにも便利な機能です。

下記がソースとなります。



下記のように表示されます。

※ご利用のブラウザでは再生することができません。



sample.mp3
sample.ogg
sample.wav

の部分が音声データになります。

ブラウザによって再生可能な形式に差があるため、音楽ファイルは、「mp3」「ogg」「wav」のいくつかの形式しておくと良いでしょう。

1形式しか用意しなかった場合は、閲覧者によっては再生できない可能性があります。

「sample」の部分は、ご自分でつけた音声名に変更してください。

上記の「sample.mp3」の部分は、FTP等でサーバーにアップした音声データ場所を記述してください。



など

※ご利用のブラウザでは再生することができません。

を記述しておくと、タグがサポートされていない環境で表示させるメッセージを記述することができます。

いかがでしょうか?

とても簡単にではないでしょうか?

上記のソースを使用して、ご自分のホームページににも音声データ、音楽データを埋め込んでみてはいかがでしょうか?

※もし、プレイヤーの再生ボタンを押しても音楽が流れないという方は、音楽ファイルが正常に読み込まれていない可能性があるので、 音楽ファイルの形式のチェックやソースが正しいか、サーバへのデータアップした場所の指定が正しいかなど確認してみてください。

筆者が管理している、Mousai.life(ムーサイ ドット ライフ)では、著作権フリー音楽(BGM)素材を提供しています。

商用利用可能で、mp3形式で配布しています。

また、煩わしいクレジットやリンクの表記、ユーザー登録は一切不要です。

アプリ・ゲーム、映像(YouTube)など、あらゆる媒体でご利用が可能です。

あらゆるプロダクトにお役立て下さい。

BGM公開情報

BGM「Sad love」を公開しました。

スローテンポの切ない愛の物語。

優しい瞬間と感情的なうねり、親密な雰囲気を表現しました。

美しく、感動的で、そして切ないはかない愛。

ピアノと弦楽器、ギター、サックスのトラックです。

ロマンチックなビデオ、家族の映画、写真のスライドショー、クリスマスのプロジェクト、美しく、表現豊かで心に強く訴えるムードものにいかがですか?

是非、視聴してみてください。

下記の「視聴する»」をクリックすると「Sad love」のサンプルを視聴することができます。

Pocket
このエントリーを Google ブックマーク に追加

⇓ 他の記事も読む ⇓

King Gnuが、ANA新CMのために、新曲“飛行艇”を書き下ろし!!、大坂なおみ選手出演。8・9配信リリース決定

日向坂46、「ママのドレス」MV公開!こんなに好きになっちゃっていいの?」のユニット曲

ザ・ビートルズの初主演映画『ハード・デイズ・ナイト』が、東阪Zeppにて一夜限りで上映決定!2019年10月28日(月)

テイラー・スウィフト「Lover」のミュージック・ビデオ(MV)を公開!!、2019年8月23日(金)

BGM「Sleep well」がAudiostockでの販売を開始いたしました

Audiostockでの販売

Mousai.lifeでは、「Audiostock」で「WAV 24bit」の高音質で販売しています。

「Audiostock」の厳しい審査をクリアした、BGMですので是非ご視聴ください。

また、「Audiostock」でご購入の際は、下記の「招待コード」を使用して「Audiostock」の会員登録してからご購入していただくと、「Audiostock」から「300円」進呈されますので、是非、「招待コード」をご利用ください。

↓「招待コード」↓

PwdutmylaZ97

↓「Audiostock」でのご購入は下記をクリック↓

Mousai.life 著作権フリーBGM 「Audiostock」で「WAV 24bit」の高音質で販売しています

Translate »