HTML5 audio タグ を使って音声を出す

公開日: : html5, javascript

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生することが出来るようになりました。

audioタグ 使い方

audioタグで音声を再生する

<audio src="sample.mp3"></audio>

audioタグで音声を再生する(コントローラー付き)

<audio src="sample.mp3" controls></audio>

audioタグで音声を再生する(複数の場合)

複数指定するのは、ブラウザによって再生しない形式があるからです。

<audio id="oto">
<source src="sample.m4a">
<source src="sample.mp3">
<source src="sample.ogg">
</audio>

JavaScript の方からは、idにアクセスし制御出来ます。

oto.play();

audioタグの属性

属性名 説明
src 音声ファイル名を指定する。
autoplay 自動再生する。デフォルトは自動再生しない。
preload 先読みをするかどうかの指定。
none:先読みを必要としない
metadata:メタデータだけは先読みする
auto:音声全体を先読みする
loop ループ再生する。デフォルトはループ再生しない。
muted ミュート。デフォルトはミュートしない。
controls 再生・停止などの制御を行うコントローラを表示する。デフォルトは非表示。
mediagroup 属するグループの名前を指定する。

audioタグの代替

audioタグでは、対応していないブラウザ向けの代替コンテンツを配置できます。
例では、audio要素に対応していない場合はobject要素を、それも対応していない場合はリンクが表示されるように指定しています。

<audio>
<source src="sample.m4a">
<source src="sample.mp3">
<source src="sample.ogg">
<object data="sample.mp3">
<param name="src" value="sample.mp3">
<param name="autostart" value="false">
<a href="example.mp3">音声を聴く</a>
</object>
</audio>

audioタグをJavaScriptで制御する サンプルコード

JavaScript 部分

function Oto_play() {
   oto.play();
}
function Oto_pause() {
   oto.pause();
}

HTML部分

<audio id="oto" controls>
<source src="sample.m4a">
<source src="sample.mp3">
<source src="sample.ogg">
</audio>
<input type="button" value="再生する" onclick="Oto_play()">
<input type="button" value="一時停止" onclick="Oto_pause()">

DEMO を見る

JavaScript タイピングゲーム

最後に車の免許取得のために、自分用に作った「JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)」に音を付けてみました。
JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)
DEMO を見る

関連記事

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

画像加工 cropbox.js

写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c

記事を読む

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。

記事を読む

HTML5 とは?

HTML5とは? HTML5は、標準化団体のW3C(World Wide Web Consorti

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

canvas タグでお絵描き(レスポンシブ)

canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か

記事を読む

javascriptで複数同じ名前のformの値を取得する

javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHTMLフォームがあった場合、

記事を読む

html5 javascript

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202405
      Mon Tue Wed Thu Fri Sat Sun
      12345
      6789101112
      13141516171819
      20212223242526
      2728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑