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

html5のマーク

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

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

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

このツイートしたのを一か月分まとめたのを、
http://tudukeru.net/category/音楽/ツイッターでの紹介曲/
ブログの、このカテゴリで更新していっています。

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

それで、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の間で調整できます。

ついでに、プレイヤーについていたダウンロードできるボタンを消しました。試聴できる部分の音をダウンロードできる状態って、なんだか良くないかなって思ったので。
(ダウンロードボタンがつくのは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” <span class=”bold”>controlsList=”nodownload”</span> 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);
———————–

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

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

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

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

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

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

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

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

スポンサーリンク
レンタングル大




レンタングル大




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レンタングル大