アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

オーディオファイルを再生するためのコードを書いてみる

MP3の音源ファイルなどをWEB上に表示したいときのやり方を勉強しました。

もっと難しいと思っていたのですが、再生するためのコードは意外に簡単でした!

☆audioタグの中に必ず

This brouser does not support HTML5 audio.

対応してないブラウザに表示する文言を入れるのを忘れない。

※W3schoolで最新の対応してるブラウザなどが記載されています。http://www.w3schools.com/html/html5_audio.asp

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-9-23-58

 

☆リンク先のMP3ファイルは必ずhtmlファイルと同じディレクトリにあることが前提です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-9-18-50

----------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html >
<head>

</head>
<body>

<audio controls="controls">
<source src="Little do you know.mp3" type ="audio/mpeg"/>
This browser does not support HTML5 audio.
</audio>

</body>
</html>

----------------------------------------------------------------------------------------------------------

これを保存してクロームで確認します。↓

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-9-10-57

再生ボタンを押すと曲が始まりました。ちなみに私は好きな曲Alex and SiaraのLittle do you know? をリンクに入れてみましたよ。

www.youtube.com

すごく綺麗な歌声ですので、プログラミング関係ないですけどよかったら聞いてみてください!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-28-9-15-20

youtubeなどの動画サイトのリンクも同じようにできます。

websiteに簡単にオーディオファイルを表示させる方法でした! 

にほんブログ村 IT技術ブログへ
にほんブログ村