【HTML】【javascript】audioタグの設定と、javascriptでオーディオを操作する方法

【HTML】audioタグ
audioタグに以下のように設定を書くことができます。
src属性 | 音声ファイルを指定する | ||
---|---|---|---|
preload属性 | auto | ファイル全体を事前に読み込むようにする。 | |
none | ファイル全体を事前に読み込まないようにする。 | ||
metadata | 音声のメタデータ(長さやファイルサイズ)の情報のみ読み込むようにする。 | ||
autoplay属性 | 音声を自動再生する | ※ ページを読み込み時に自動再生させることはできない。クリックやマウスオーバーイベントが必要。 | |
loop属性 | ループ再生を指定する | ||
controls属性 | コントローラーを表示する |
例
<audio src="mp3のパス" preload="metadata" autoplay loop controls></audio>
ブラウザによって、見た目が変わるので注意。
javascriptでオーディオを操作
audioタグにid(media)を追加します。
<audio src="mp3のパス" id="media"></audio>
<script>
const audio = document.getElementById("media");
</script>
再生&停止
再生
<button onclick="play()">再生</button>
<script>
function play() {
audio.play();
}
</script>
一時停止
<button onclick="pause()">一時停止</button>
<script>
function pause() {
audio.pause();
}
</script>
停止&最初から
最初から再生させるためには、
currentTimeを0
に戻す。
<button onclick="currentTime_start()">停止&最初から</button>
<script>
function currentTime_start() {
audio.pause();
audio.currentTime = 0;
}
</script>
音量
音量アップ&ダウン、ミュート
音量の範囲は、0.0 ~ 1.0
<button onclick="volume_up()">音量アップ</button>
<button onclick="volume_down()">音量ダウン</button>
<button onclick="muted()">ミュート</button>
<script>
function volume_up() {
audio.volume = audio.volume + 0.1; //音量の値を0.1(10%)ずつアップ
}
function volume_down() {
audio.volume = audio.volume - 0.1; //音量の値を0.1(10%)ずつダウン
}
function muted() {
if(audio.muted == true){
audio.muted = false;
} else {
audio.muted = true;
}
}
</script>
連続再生loop
<button onclick="loop()">連続再生</button>
<script>
function loop() {
if(audio.loop == true){
audio.loop = false;
} else {
audio.loop = true;
}
}
</script>
コントローラーの表示/非表示
<button onclick="controls()">コントローラーの表示/非表示</button>
<script>
function controls() {
if(audio.controls == true){
audio.controls = false;
} else {
audio.controls = true;
}
}
</script>
ファイルの長さを取得
console.log(audio.duration)
ページを読み込み時に自動再生させることはできないため、取得できません。 クリック等、イベント発生後に取得できます。
コントローラーを自作
完璧とは言えませんが、コントローラーを自作してみました。
まとめ
-
audioタグを設定
「src」: 音源
「preload」: 読み込み指定
「autoplay」: 自動再生
「loop」: 連続再生
「controls」: コントローラー
-
javascriptでオーディオを操作
audio.play() 再生
audio.pause() 停止
audio.volume -= 0.1 音量アップ
audio.volume += 0.1 音量ダウン
audio.muted = ture / false ミュート
audio.loop = ture / false 連続再生
audio.controls = ture / false コントローラー
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク