html5のaudioタグで格闘した。デフォルトの音量(ボリューム)制御のカスタマイズをしました。

html5のマーク IT・ネット関連
スポンサーリンク

試聴ができるようにしたものの・・・音がでかいので対策することにした。

apple musicに登録して、日々、音楽を聴いています。

そうして聴いた曲のなかから、これはいいなっていうのを@tetete437でツイートしています。

このツイートしたのを一か月分まとめたのを、
おすすめ曲まとめ(洋楽・癒し系・女性ボーカル多め)いい音楽集めてます。
ブログの、このカテゴリで更新していっています。

こういう音楽紹介のページを作るときって、やっぱり試聴ができるようになっているほうが便利だし楽しいですよね。

それで、apple musicやiTunesの曲を試聴できるようにする方法ってないかな~って探してみると、
http://naremo.jp/2015/05/itunes-link-maker/
こちらで、便利なサービス(AppHtmlWeb)が紹介されていたので、さっそく使って自分のブログに掲載しました。

試聴でいるiTunesへのリンクを掲載できたのは良かったんですが、再生すると、かなり大きな音が出てしまってました。

ボリュームをコントロールするところがあるので、音量が大きすぎたら、そこで下げてもらったらいいんですが、最初に大きな音が出たら、びっくりしてしまいますよね。

私が、そういう状態になってましたから。

それで、初期設定みたいにデフォルトの音量を低くすることができないかなって調べてみると、どうやらできる様子。

html5のaudioタグを使って試聴できるようにしていて、そのaudioタグに対してjavascriptかjQueryを使ってデフォルトの音量を低く設定できることが分かりました。

いろいろしてみて、理想に近い状態にできたので、その過程を書いておきます。

スポンサーリンク

wordpressの管理画面からjavascript.jsを編集できるようにした。

このブログは、wordpressでSimplicity2っていうテーマを使っています。

まずは、wordpressの管理画面からjavascriptのファイルをカスタマイズできるようにします。

こちらのブログ
https://nelog.jp/wp_theme_editor_filetypes
で、その方法が分かりました。ありがとうございます。

この方法を使うと、「外観→テーマの編集」でjavascript.jsのカスタマイズがwordpressの管理画面からできるようになりました。

本当は、ffftpとかでしたほうがいいとかなんとかっていう情報を見かけたような気がしますが、wordpressの管理画面から操作するほうが楽なので、今回は、そうしました。

結論から書くと、このjavascript.jsに、

(function($){
$('audio').prop('volume',0.2);
})(jQuery);

というコードを付け加えると、ブログのページ上にある試聴のプレイヤーのデフォルトの音量を低く設定できるようになります。

コードの「0.2」という数字を変えると音量の初期設定を変えることができます。0~1の間で調整できます。

スポンサーリンク

子テーマのjavascript.jsにコードを記述するほうがいい。【2018年2月12日追記】

javascriptのコードを加える場合、子テーマのjavascript.jsにコードを記入するほうがいいです。

simplycity2の場合は、こちらから子テーマをダウンロードします。
https://wp-simplicity.com/downloads/child-theme2/

simplycityの子テーマのインストール方法も上のリンク先から見ることができます。

親テーマのjavascript.jsにコードを記述してしまうと親テーマをアップデートしたときに、自分で親テーマのjavascript.jsに書き加えていたコードが消えてしまいます。

親テーマをアップデートしても子テーマにコードを記入しておけば消えることがないので便利です。

子テーマのjavascript.jsにコードを記述する方法

wordpressの管理画面の左のメニューから「外観」→「テーマの編集」をクリック。
外観からテーマの編集へ

「編集するテーマを選択」の右のところが「Simplycity2 child」になっていなければ「Simplycity2 child」を選んで「選択」をクリック。

テーマファイルのところの「javascript.js」をクリック。

子テーマの画面

「javascript.js」編集領域のこのあたりに音量初期設定のコードを挿入しました。
編集領域

「ファイルを更新」をクリックして完了です。

コードを記述したのに処理が反映されていない時はブラウザのキャッシュを削除

「javascript.js」にコードを記述して反映されているか自分のブログで確認しても変化がないときがあります。

私も反映されなくて焦りました。

変更処理が反映されないときは、ブラウザのキャッシュを削除してみましょう。

私はブラウザはchromeを使っているのでchromeの場合のキャッシュの削除方法を解説します。

chromeの右上のほうにある縦に点が3つ並んでいるところをクリック→「その他ツール」→「閲覧履歴を消去」をクリック
閲覧履歴を消去

「データを消去」をクリック
データを消去

ショートカットキー(Ctrl+Shift+Delete)でも「データを消去」の画面を開くことができます。

「データを消去」をクリックしたら、ブログのページを再読み込みしてみて変更処理が反映されているか確認してみてください。

スポンサーリンク

試聴音源をダウンロードさせないようにしておきました。

ついでに、プレイヤーについていたダウンロードできるボタンを消しました。試聴できる部分の音をダウンロードできる状態って、なんだか良くないかなって思ったので。
(ダウンロードボタンがつくのはchromeのみのようです。firefoxtとiphoneのsafariだと、元からありませんでした。)

この部分ですね。
ダウンロードボタン
ここを、こういうふうにすることができました。
ダウンロードなし

どうするかというと、ブログの記事投稿のとこで、プレイヤー部分のソースの、<audio>タグのところに、
controlsList="nodownload" 
というのを付け足すだけでOKです。

つまり、こうなります。

<audio src="http://a207.phobos.apple.com/us/r30/Music6/v4/70/4c/11/704c119d-266d-e46b-5e79-16d7e4ef732f/mzaf_2985075268249489556.plus.aac.p.m4a" controlsList="nodownload" controls>

これで完成。

完成までの道のりの記録

以下は、ここまでたどり着くまでに、たどった過程を書いておきます。

最初は、こちらのページ
http://primedesignworks.blogspot.jp/2010/04/html5-audio-video_20.html
を、発見して、さっそく設定してみました。

<audio id="mp3" br=""></audio>

</audio>

っていうふうに、
一つ目のプレイヤーにidをつけてやってみると、ちゃんとデフォルトの音量が低くなりました。

やった!うまくいった!って思って、同じページにある他のプレイヤーの<audio>タグにidをつけていきました。

ところが、一つのプレイヤーはうまくいくんですが、他のプレイヤーのデフォルトの音量は変化なし。

おかしいな・・・と思って考えたら、ふと、あ!idって、一つのページに対して一か所しか指定できないんだったということに気付きました。

なので、同じページの複数のプレイヤーに同じidをつけても、一つしか反映されなかったんでしょう。おそらく。

idではなくclassを取得してみることにした。

そこで、class名を付けることしました。

id="mp3"

としているのを、

class="mp3"

に全てのプレイヤーで変更してから、
javascript.jsの

var audio = document.getElementById("mp3");

の部分を、

document.getElementsByClassName("mp3")

にしました。

さあ、これでうまくいくかなって思ったら、全部のプレイヤーで音が大きいまま変化なし。
うまくいきませんでした。
(今思うと、もしかしたら、for文で値みたいなのを取得していくといいのかな?)

どうも、この方法だとダメみたいだと思って、他の方法を検索で探していきました。

スポンサーリンク

記述方法が違った。

そして発見したのが、このページ
https://nmrkingdom.wordpress.com/2015/06/06/html5のaudioタグでデフォルトのボリュームを設定/
の、こういうコードです。

$(function(){
$(“audio”).prop(“volume”,0.2);
$(“audio”).trigger(‘play’);
});

これを、そのままwordpressのjavascript.jsにコピペすればできるかもって思ってやってみました。

結果、まったく反応なし。

それどころか、たぶんjQueryで実装している「上へ戻る」ボタンが表示されなくなっていました。

それで、は!っと気づきました。

ソースの記述方法が間違っているのではないかと…。

記述方法が間違っているから、その影響を受けて「上へ戻るボタン」が消えてしまっているのではないかと思ったんです。

javascript.jsを眺めていると、
こうではなくて→$(function()
こう記述されている→(function($)
箇所がありました。
あと、最後のところに(jQuery)と書かれていました。

この記述のとおりに書き換えてみようと思い、
これを
——————–

$(function(){
$(“audio”).prop(“volume”,0.2);
$(“audio”).trigger(‘play’);
});

——————–
こういうふうに
——————–

(function($){
$('audio').prop('volume',0.2);
$('audio').trigger('play');
})(jQuery);

——————–
書き換えました。

すると動きました!
やった!って思ったら、今度は、ページを開いたとたんに、各プレイヤーの音が一斉に再生されるという状態になってしまいました。

ただし、「上へ戻るボタン」は復活していました。

さあ、これで記述方法は正解ということが分かりました。もうちょっとです。

ページを開いたとたんに音が鳴るのをストップした。

ページを開いたとたんに、なにもしていないのに音が鳴りだすという現象を、どうにかしないといけません。

それで、コードを見ていると、
この一行が怪しいと思いました。

$('audio').trigger('play');

トリガーでプレイってことは、ページが開いてプログラムが走り始めたらplayしてくださいっていう命令っぽいです。

そこで、この一行を削除することにしました。

最終的に、こういうコードになりました。
———————–

(function($){
$('audio').prop('volume',0.2);
})(jQuery);

———————–

これで、ページが開いても、すぐに音が鳴りません。

再生ボタンをクリックかタッチすることで、曲が鳴りだすようになりました。

スポンサーリンク

同じページのなかで、一か所しか音が鳴らないようにしたい。

あと実装したいのは、
一つのプレイヤーで試聴の音を再生しているときに、
別のプレイヤーで試聴の音の再生を始めたら、始めに再生していた試聴の音の再生を自動的にストップするという処理です。同時再生させないようにしたいです。

再生中かどうか取得するみたいなコードを書くのでしょうか。

現状は、再生ボタンをクリックした分だけ、再生される曲が増えて同時に鳴っている状態になってしまいます。

まあ自分でクリックして再生を止めればいいわけですが、どうせなら、自動の処理で、一曲分だけしか再生できないようにしたいですよね。

この処理は、今後の課題です。

プログラミングをある程度知っておくとシステム関連の問題を解決しやすくなる。

この記事のようにプログラム関連で困ったりするとイライラしてしまいますよね。

プログラミングのことが、まったく分からない状態だと途方にくれてしまいます涙

インターネットを検索して問題を解決できる情報を探すことは誰でもできます。

しかし、ある程度はプログラミングのことを知っておいたほうがネットで探してきた解決方法の情報を理解しやすくなります。

この記事では私はhtml5のaudioタグの初期音量設定で困ったわけですが、なんとか解決できました。

じつはprogateというオンラインプログラミング学習サイトで、私はある程度htmlやcss、javascpirtなどのプログラミングを勉強していたんです。

progateでプログラミングを学習しておいたおかげで、インターネットから拾ってきた情報が理解しやすくなりhtml5のaudioタグの初期音量設定の問題を解決できました。

オンラインプログラミング学習サイトのprogateについて記事を書いています。プログラミングに興味がある人へprogateがいいよって多くの人がオススメしています。

https://tudukeru.net/2017/07/11/progate-experiences/

コメント