javascript で作る複数ファイル対応のオーディオプレーヤー

2020年4月14日 03:17 カテゴリー: Javascript

音楽素材サイトを作成したときに作ったオーディオプレーヤーを公開しようと思います。音楽プレーヤーのデモはこんな感じ

https://tamalog.info/soundplayer/

音楽素材サイトはこっち

https://soundfreaks.jp/

今回作ったのは複数のオーディオファイルを取り扱うためのオーディオプレーヤーです。特徴は以下の通り。

  • 曲を再生している時に別の曲を再生すると前に再生していた曲は止まる。
  • コントローラーは一つ
  • 再生、一時停止、ストップボタン対応
  • ボリュームレンジ対応
  • シークバー対応

こんな感じです。当ブログのコンセプト”改造出来るソースコード”を目指して理解しやすいように一つ一つ丁寧に解説していきます。改造したいときの説明書として利用してください。ただし、一番上から順番に理解していかないと解読できない使用です。物凄く長くなってしまいますがご了承くださいな。

ちなみに、オーディオプレーヤーを作りたくてjavascriptを初めて触ったのでソースコードは物凄く汚いです。必要ないものはあるだろうし、強引過ぎる物があるかも知れません。玄人の方が見たら酷いコードだと思うんでしょうが、僕はかなり必死で作りました。その辺りだけご了承願います。

設計図

今回作成したコードの設計図は下記のとおりです。

ファイルは全て同じフォルダ内に入れます。名前も同じにしてください。

このオーディオプレーヤーの構造

アクション:曲のタイトルをクリック

リアクション1:今まであったaudioタグを消去して、新しくaudioタグを生成します。その中にsouceタグでクリックしたタグに相応のオーディオファイルを指定する。

リアクション2:音楽を再生する。

リアクション3:曲のタイトルを取得して表示する。

リアクション4:シークバーと再生時間の表示。

再生、一時停止、停止ボタンの設定

音量レンジの設定

JavaScriptはこんな感じで作られています。

HTML(bodyの中身)の構造

音楽の制御
<class名"musicplayer">
 タイトルの表示
  <class名"controler">
   ボタン類
   ボリューム
   シークバー
   オーディオタグ
  </controler>
</musicplayer>
音楽セット用リンク

コード

いよいよコードを表示すっごく長いので心してみてください。

JavaScript(soundplayer.js)

(function(){
	// 設定
	var setClass = 'sounds' ;							// ボタン要素のクラス名
	var setDir = './' ;									// 音声ファイルがあるフォルダ(最後は[/])

	// クラス名が付いた要素を取得する
	var sounds = document.getElementsByClassName( setClass ) ;

	// 全ての要素にクリックイベントを設定する
	for( var i=0,l=sounds.length ; l>i ; i++ ){
		// クリックイベントの設定
		sounds[i].onclick = function()
		{

			// ファイル名の取得
			var file = this.getAttribute( 'data-file' ) ;
			
			//audioの削除
			if (document.getElementsByTagName("audio").length){
				var resetaudio = document.getElementById("audioplayer");
				resetaudio.parentNode.removeChild(resetaudio);
			}
			
			
			//souceの削除
			if (document.getElementsByTagName("souce").length){
				var resetwav = document.getElementById("wav");
				resetwav.parentNode.removeChild(resetwav);
				var resetmp3 = document.getElementById("mp3");
				resetmp3.parentNode.removeChild(resetmp3);
			}

			//を作る
			var newaudio = document.getElementById("audioarea");
			var createaudio = document.createElement("audio");
			createaudio.setAttribute("id","audioplayer");
			audioarea.appendChild(createaudio);
			
			//[souce]を作る
			var audio_player = document.getElementById("audioplayer");
			var wav = document.createElement("source");
			wav.setAttribute("src", setDir + file + ".wav");
			wav.setAttribute("id", "wav");
			wav.innerHTML     = "";
			var mp3 = document.createElement("source");
			mp3.setAttribute("src", setDir + file + ".mp3");
			mp3.setAttribute("id", "mp3");
			mp3.innerHTML     = "";
			
			audioplayer.appendChild(wav);
			audioplayer.appendChild(mp3);

			
			//再生
			 audioplayer.play();


			//タイトルの表示
			
			var title = this.getAttribute("title");
			document.getElementById( "songtitle" ).innerHTML = title;




			//シークバー
			const audio = document.getElementsByTagName("audio")[0]
	
			audio.addEventListener("timeupdate", (e) => {
				var $audioElementReference = document.getElementById( "audioplayer" );
				var $current = $audioElementReference.currentTime;
				const duration = Math.round(audioplayer.duration);
				document.getElementById('current').innerHTML = playTime(Math.round($current));
				document.getElementById('duration').innerHTML = playTime(duration);
				const percent = Math.round((audioplayer.currentTime/audioplayer.duration)*1000)/10;
				document.getElementById('seekbar').style.backgroundSize = percent + '%';
			});

			document.getElementById('seekbar').addEventListener("click", (e) => {
			const duration = Math.round(audioplayer.duration);
			if(!isNaN(duration)){
				const mouse = e.pageX;
				const element = document.getElementById('seekbar');
				const rect = element.getBoundingClientRect();
				const position = rect.left + window.pageXOffset;
 				const offset = mouse - position;
				const width = rect.right - rect.left;
				audioplayer.currentTime = Math.round(duration * (offset / width));
			}
		});
			
		function playTime (t) {
			let hms = ''
			const h = t / 3600 | 0
			const m = t % 3600 / 60 | 0
			const s = t % 60
			const z2 = (v) => {
			const s = '00' + v
 			return s.substr(s.length - 2, 2)
		}
		if(h != 0){
			hms = h + ':' + z2(m) + ':' + z2(s)
		}else if(m != 0){
			hms = z2(m) + ':' + z2(s)
		}else{
			hms = '00:' + z2(s)
		}
		return hms
	}


			return false ;
			
			
		};
	};
})() ;
	
	// 停止、再生ボタン
	function stoper()
	{
		var Soundstop = document.getElementById( "audioplayer" ) ;

		if( Soundstop != null )
		{
			Soundstop.pause() ;
			Soundstop.currentTime = 0 ;
		}
	}
	function pauser()
	{
		var Soundpouse = document.getElementById( "audioplayer" ) ;

		if( Soundpouse != null )
		{
			Soundpouse.pause() ;
		}
	}
	
		function playbottun()
	{
		var Soundplay = document.getElementById( "audioplayer" ) ;

		if( Soundplay != null )
		{
			Soundplay.play() ;
		}
	}

	// ボタンをクリックした時のイベント
	document.getElementById( "stop" ).onclick = function()
	{
		stoper() ;
		return false ;
	}
	
		document.getElementById( "pause" ).onclick = function()
	{
		pauser() ;
		return false ;
	}
		document.getElementById( "splay" ).onclick = function()
	{
		playbottun() ;
		return false ;
	}
		

	



	//音量制御
	window.onload = function(){
		setVolume( 1 );
		document.getElementById( "volume" ).value = 1;
	}
	function setVolume( $volume ) {
		var $elementReference = document.getElementById( "audioplayer" );
		$elementReference.volume = $volume;
		var $volume = $elementReference.volume;
		$volume = $volume * 100 ;
		document.getElementById( "volumeoutput" ).innerHTML = $volume;
	}

な・・・長くね?これ全部説明するの?

HTML(index.php)

<html>
<head>
	<title>audio player</title>
	<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="musicplayer">
	<div class="songtitle">
		<p id="songtitle">
			
		</p>
	</div>
	<div class="controler">
		<div class="innercontroler">
			<div class="playerimage">
				<a href="#"  id="splay"><img src="./play.png"></a>
				<a href="#"  id="pause"><img src="./pause.png"></a>
				<a href="#"  id="stop"><img src="./stop.png"></a>
			</div>
	
		<div class="volumearea">
			<p class="volumesize">
				Volume:<span id="volumeoutput">100</span>
			</p>
			<input type="range" value="1" id="volume" min="0" max="1" step="0.05" onchange="setVolume(this.value)">
		</div>
	
		<div id="seekbar">
			<div id="time">
				<span id="current">00:00</span>
				<span id="duration">00:00</span>
			</div>
		</div>
		<div id="audioarea">
			<audio id="audioplayer"></audio>
		</div>
	</div>
		
</div>
	
</div>



	<p>
		<a href="#" class="sounds" data-file="touch" title="Touch Highest Cloud" id="splay">Touch Highest Cloud</a>
	</p>
	<p>
		<a href="#" class="sounds" data-file="subnautica" title="Subnautica" id="splay">Subnautica</a>
	</p>




<script src="./soundplayer.js"></script>
</body>
</html>

CSS(style.css)

.musicplayer{
	width: 500px;
	background: #ddd;
	text-align: center;
	padding: 10px;
}

#seekbar {
	width: 300px;
	height: 15px;
	margin: auto;
	border-radius: 3px;
	border:solid 1px #000;
	background: linear-gradient(#fff,#aaf) no-repeat #fff;
}
#time{
	padding: 3px;
	width: 100%;
	font-size: 9px;
	display: flex;
	justify-content:space-between;
	color: #000;
}

こんな感じでかなり長くなっていますがじっくりと解説をしていきます!

soundplayer.jsの解説

まずは難解JavaScriptから解説していこうと思います。

(function(){

関数の始まりです。関数とは” タスクや値計算を実行する文の集まり ”だそうです。調べました。

var setClass = 'sounds' ;

varで”setClass”という変数を宣言しています。”setClass”という関数を作りますよ!っていう事ですね。

変数とは中身を取り出したり、変更したりすることができる箱のようなものです。

中身には”sounds”という文字を入れました。これはボタンのクラス名になります。何回も使ったりする場合、一括で変更するときに便利です。

var setDir = './' ;

同じように”setDir”と”setStopButtonId”という関数を設定します。”setDir”は音楽ファイルが格納されているフォルダのURLです。もしmusicというフォルダに音楽ファイルをまとめておきたい場合は./を./music/と変更してください。

var sounds = document.getElementsByClassName( setClass ) ;

soundsという変数を作成して、その中にsetClassという変数を検索して入れています。setClassの中身はsoundsなので、soundsというクラス名がついているエレメント(HTMLタグ)を格納します。

曲名をクリックしたときのイベント

	// 全ての要素にクリックイベントを設定する
	for( var i=0,l=sounds.length ; l>i ; i++ ){
		// クリックイベントの設定
		sounds[i].onclick = function()
		{

前に”sounds”という変数に”sounds”というクラス名が付いたエレメントを全て代入しています。そして、ここの”for文”で新たに”i”という変数に”0”を、”l”という変数に”soundsという変数の長さ”を代入しています。その後”l>i”で比較して、”i”のほうが少なければ”i”に1足してもう一度繰り返すという文章ですね。つまり、”sounds”というクラス名のついたエレメントの数だけ繰り返しますよ!っていう文章です。難しすぎ。

var file = this.getAttribute( 'data-file' ) ;

“file”という変数を作って、クリックしたエレメントの中から”data-file”という属性の値を取得してくださいね!っていう意味。今回は”data-file”という属性にファイル名を指定しているので、fileにはファイル名が入ります。

今あるaudioタグを削除する。

今あるaudioタグを削除することで、今流れている曲を停止します。この方法を使わなくても今流れている曲を停止できるんですが、一括操作可能なコントロールパネルを作りたかったので、この方法をとりました。複数のaudioタグが存在する状態でコントロールできなかったです。

//audioの削除
if (document.getElementsByTagName("audio").length){
	var resetaudio = document.getElementById("audioplayer");
	resetaudio.parentNode.removeChild(resetaudio);
}

ifはもしもという意味。もしaudioというタグが存在するならという意味ですね。この文章今後も出てくるのでついでに説明すると、documentはページ本体の事です。.getElementsByClassNameにするとクラス名を取得して、.getElementByIdにするとid名を取得します。idは同じページに同じidを複数のタグにつけられないので、Elementsを複数形ではないElementに変更します。最初の頃これで結構やられました。

audioタグが見つかったら”resetaudio”という変数に”audioplayer”というidのついたエレメントを代入。その後”resetaudio”で代入されたタグを”removeChild”します。削除ですね。

souceも削除する。

audioタグの中にいたsouceタグですが、これも削除します。今回はmp3とwavを使う前提で作られています。他のも使いたい場合はif内の2行をコピーしてwav又はmp3の部分を変更してください。減らしたい場合は直接audioに埋め込んでもいいですし、if内のいらない2行を削除しても大丈夫です。消し方は上のaudioタグを削除するで詳しく説明してあるので参考にしながら理解してやってみてください。

//souceの削除
			if (document.getElementsByTagName("souce").length){
				var resetwav = document.getElementById("wav");
				resetwav.parentNode.removeChild(resetwav);
				var resetmp3 = document.getElementById("mp3");
				resetmp3.parentNode.removeChild(resetmp3);
			}

audioタグを削除するで説明したものとほぼ同じなので省略します。

audioタグを生成する。

消したら作るんです。クリックされたリンクにある情報をもとに生成します。

//を作る
			var newaudio = document.getElementById("audioarea");
			var createaudio = document.createElement("audio");
			createaudio.setAttribute("id","audioplayer");
			audioarea.appendChild(createaudio);

“newaudio”という変数に”audioarea”というidがあるエレメントを指定します。これはこれからaudioタグを作成する場所になります。

その後”createaudio”という変数にaudioタグを作る為のコマンドを格納しておきます。createElementつまりエレメントをを生成するという意味があります。(“audio”)なのでaudioタグを作るということですね。

“createaudio”にaudioタグにid属性にaudioplayerを入れるコマンドを追加で格納します。

最後に”audioarea”の変数の場所の中に”createaudio”を生成するコマンドを実行します。

souceタグの生成

//[souce]を作る
			var audio_player = document.getElementById("audioplayer");
//wavファイルの入ったsouceの作成
			var wav = document.createElement("source");
			wav.setAttribute("src", setDir + file + ".wav");
			wav.setAttribute("id", "wav");
			wav.innerHTML     = "";
//mp3ファイルの入ったsouceの作成
			var mp3 = document.createElement("source");
			mp3.setAttribute("src", setDir + file + ".mp3");
			mp3.setAttribute("id", "mp3");
			mp3.innerHTML     = "";
//タグの生成
			audioplayer.appendChild(wav);
			audioplayer.appendChild(mp3);

まずはsouceを入れるaudioタグを”audio_player”という変数に格納します。似たような変数やidが使われていますが、後から機能をどんどん足していった結果こうなってしまいました。初心者あるあるですよね。分かりづらい箇所あるかと思いますが頑張って使い分けてください。

wav用、mp3用のsouceタグをそれぞれ作ります。内容はほぼ同じです。

変数”wav”にsouceタグを作るコマンドを格納します。

変数”wav”にsrc要素を追加し、中身に音楽のURLを入れます。URLの表示方法がsetDir + file + “.mp3″となっていますが、””で囲まれているのは文字列として扱われ、そのままの物が変数です。”setDir”は初めの方で設定しました。”file”はクリックイベントの直後で取得していますね。

変数”wav”にid要素を追加して、wavと入れます。これはブラウザに認識してもらうためのものですね。

wav.innerHTML = “”;でaudioの内容を一度消して、audioplayer.appendChild(wav);で生成します。mp3も同じ作業をします。

再生する!

遂にここまで来ました。audioを再生します。コードは下記

audioplayer.play();

短っwid”audioplayer”を再生します。これで音楽は再生できてしまいます。

再生中の曲のタイトルを表示する。

謎機能wただデザインをカッコよくしたいために追加した機能。音楽プレーヤーに表示するようにしています。

var title = this.getAttribute("title");
document.getElementById( "songtitle" ).innerHTML = title;

“title”を定義して、クリックされたリンクのtitle要素の値を格納します。

idに”songtitle”という名前を付けられているタグを探して、その中身を変数”title”の中身と書き換えます。

シークバーの表示

これは難しいやつですよ。シークバーは音楽が再生している位置に色がついて、バーをクリックした位置まで送ったり戻したりできるあれです。

順番に見ていきましょう。

const audio = document.getElementsByTagName("audio")[0]

constは定数を定義するものです。varは変数でしたね。変数と定数の違いは格納されている値を変更できるかできないかという違いがあります。定数は同じコード内で再定義も変更もできないです。それ以外は同じ使い方ができます。

上記コードの意味は定数”audio”にaudioタグを格納します。

audio.addEventListener("timeupdate", (e) => {

.addEventListenerは時間経過など継続的にイベントがあるたびに呼び出される関数を指定できます。今回は音楽が現在再生されている時間が進むたびに関数で処理されるので、使っています。timeupdateは時刻が更新されるたびに発生します。.addEventListenerとtimeupdateはセットで覚えるといいかもしれないですね。(e)はなんでも大丈夫です。eventのeじゃないかな?そしてこの後の{~}の中身が実行されるわけですね。

var $audioElementReference = document.getElementById( "audioplayer" );

$audioElementReferenceはaudioタグを操作するためのプロパティです。操作するaudioタグをidがaudioplayerとなっているものに指定しました。

var $current = $audioElementReference.currentTime;

$audioElementReference.currentTimeは再生時間を秒単位で表示します。それを$currentに代入しています。

const duration = Math.round(audioplayer.duration);

Math.roundで取得した値を整数になおします。audioplayer.durationは再生している曲の長さです。

document.getElementById('current').innerHTML = playTime(Math.round($current));

idがcurrentのタグの中に$currentを整数に直して表示します。経過時間ですね。

document.getElementById('duration').innerHTML = playTime(duration);

idがdurationのタグの中にdurationを表示します。これは曲の長さが入ります。

const percent = Math.round((audioplayer.currentTime/audioplayer.duration)*1000)/10;

現在の再生時間÷曲の長さ×100で現在の再生時間がどのくらい進んだかを%で取得しています。

document.getElementById('seekbar').style.backgroundSize = percent + '%';

シークバーのバックグラウンドのサイズを現在の再生時間にあわせて変動させます。

document.getElementById('seekbar').addEventListener("click", (e) => {

今度はシークバーをクリックしたときのイベントを設定します。これで曲を任意の時間まで早送りや巻き戻しが出来るようになります。内容はクリックしたときのイベントで解説済みなので省略。

const duration = Math.round(audioplayer.duration);

これいらないんじゃね?前に定義したじゃん!って思って消したら動作しませんでした。どうやら必要みたいです。曲の長さを整数で取得しています。

if(!isNaN(duration)){

もしdurationが数字だったらという意味ですね。isNaNは整数ではないならtureを返します。これが!で反転しています。

const mouse = e.pageX;

マウスでクリックした場所のx軸の位置を取得します。それを定数”mouse”に代入しています。

const element = document.getElementById('seekbar');

そろそろこれの説明しなくてもいいかな?

const rect = element.getBoundingClientRect();

ボックスの大きさ、位置を取得します。今回はseekbarのクリックイベントなのでseekbarの大きさを取得しています。

const position = rect.left + window.pageXOffset;

ボックスの一番左からいまの再生位置を取得します。

const offset = mouse - position;

クリックした位置-現在の再生時間の位置

const width = rect.right - rect.left;

ボックスの一番右の位置-ボックスの一番左の位置

audioplayer.currentTime = Math.round(duration * (offset / width));

再生時間をクリックした場所に飛ばす。

この数行意味が分からないでしょ?大丈夫!僕もわからないから!

時間の表示を変更する。

このまま時間を表示すると秒数で表示されてしまいます。そこで何分何秒形式にするため、下記のコードを追加します。理解しなくて大丈夫。そのまま使ってください。

		function playTime (t) {
			let hms = ''
			const h = t / 3600 | 0
			const m = t % 3600 / 60 | 0
			const s = t % 60
			const z2 = (v) => {
			const s = '00' + v
 			return s.substr(s.length - 2, 2)
		}
		if(h != 0){
			hms = h + ':' + z2(m) + ':' + z2(s)
		}else if(m != 0){
			hms = z2(m) + ':' + z2(s)
		}else{
			hms = '00:' + z2(s)
		}
		return hms
	}

ここまでが、曲名をクリックしたときに実行する関数になります。後はその後の操作で実行する関数ですね。

再生、一時停止、停止ボタンの設定

曲の再生に関するボタンです。だいぶ長くなってきているのとかなりここまで説明してきているのである程度まとめてせつめいしていきたいと思います!

	function stoper()
	{
		var Soundstop = document.getElementById( "audioplayer" ) ;

		if( Soundstop != null )
		{
			Soundstop.pause() ;
			Soundstop.currentTime = 0 ;
		}
	}

停止の関数です。

変数”Soundstop”にプレーヤーを代入しておきます。ifもしもプレーヤーがnot nullならプレーヤーを一時停止して再生時間を0にします。

なんか英語の先生みたいな説明になりましたね。どこの説明をしているか分かりやすくするとこうなるらしい。

	function pauser()
	{
		var Soundpouse = document.getElementById( "audioplayer" ) ;

		if( Soundpouse != null )
		{
			Soundpouse.pause() ;
		}
	}

今度は一時停止です。再生時間を0にしなければいいだけなので、各々名前が変わったのと、Soundstop.currentTime = 0 ;の一行を取っ払っただけです。

		function playbottun()
	{
		var Soundplay = document.getElementById( "audioplayer" ) ;

		if( Soundplay != null )
		{
			Soundplay.play() ;
		}
	}

そして最後に再生ボタン。説明いらないですよね。

各ボタンをクリックしたときのイベント

	// ボタンをクリックした時のイベント
	document.getElementById( "stop" ).onclick = function()
	{
		stoper() ;
		return false ;
	}
	
		document.getElementById( "pause" ).onclick = function()
	{
		pauser() ;
		return false ;
	}
		document.getElementById( "splay" ).onclick = function()
	{
		playbottun() ;
		return false ;
	}

HTMLで各ボタンにidを設定しています。その設定されたidのボタンがクリックされたときにどう処理するかの設定です。その前に設定した関数をそのまま実行するだけですね。

音量調節レンジ

超簡単だったボタン制御が終わり、少し難しい音量調節レンジ。ここまで解説を読んでいれば多分分かると思います。やっていきましょう!

window.onload = function(){

window.onload はHTMLが読み込まれてから実行してくださいという意味です。

setVolume( 1 );
document.getElementById( "volume" ).value = 1;

ボリュームを1(MAXが1)にして、ボリュームレンジも1にします。

function setVolume( $volume ) {

JavaScriptにはaudioObjectというものすごく便利なものがあります。それのvolumeプロパティを使いますよ!ってやつです。

var $elementReference = document.getElementById( "audioplayer" );

いつもの。$elementReferenceにaudioplayerを指定します。

$elementReference.volume = $volume;
var $volume = $elementReference.volume;

これなんの意味があるんだろう。って思って消したら使えなかったので、必須みたいです。

$volume = $volume * 100 ;

ボリュームレンジからくる値は最大1の小数点で来るので、それに100をかけます。

document.getElementById( "volumeoutput" ).innerHTML = $volume;

volumeoutputに今の音量を書きだします。

これでJavaScriptの説明は終わりです。最後の方の適当さやばすぎ。

HTML

JavaScriptの説明が終わったので、HTMLの説明に移っていこうと思います。・・・これ必要かな?必要なさそうな部分は省略して上から順番にやっていきます。わからない場所はTwitterで質問してもらうかググってください。

デザインだけ変更したい場合はここから先を読んでもらえばOKです。

<link rel="stylesheet" type="text/css" href="./style.css" />

スタイルシートを読み込みます。href=の部分がURLですので、アップしたファイル名を確実に指定しましょう。

<div class="musicplayer">
・
・
・
</div>

今回のプレイヤーは全てこの部分に入ります。divはボックスとしてよく使われます。

<div class="songtitle">
		<p id="songtitle">
			
		</p>
	</div>

曲のタイトルが入る場所。今思うとdivはいらないです。最初に何か入力しておいてもいいです。こんな感じ


<p id="songtitle">
再生中タイトル
</p>

再生中タイトルってセンスなさすぎだろw

この文章が削除されて曲名が入るようになっています。

<div class="controler">
	<div class="innercontroler">

デザインの都合上無駄にボックスを重ねる感じになっちゃってます。

<div class="playerimage">
	<a href="#"  id="splay"><img src="./play.png"></a>
	<a href="#"  id="pause"><img src="./pause.png"></a>
	<a href="#"  id="stop"><img src="./stop.png"></a>
</div>

再生、一時停止、停止ボタンです。src=で画像のURLを変更してください。imgの部分<~>を全て消してテキストで作ってもOKです。例えば ▶とか■等。スタイルシートで見た目をいじれば面白そうですね。

<div class="volumearea">
	<p class="volumesize">
		Volume:<span id="volumeoutput">100</span>
	</p>
<input type="range" value="1" id="volume" min="0" max="1" step="0.05" onchange="setVolume(this.value)">
</div>

ボリューム関連があつまっています。spanの中に現在の音量が入ります。spanの中身は削除されて新しい物に変更されます。Volume:は変わらないので好きな物に変えてください。

inputがボリュームレンジです。こっちはそんなに変える事ないかなぁ。見た目を変更したいならスタイルシートで自由自在にいじることができます。今回はレンジの見た目には触れないようにします。

<div id="seekbar">
	<div id="time">
		<span id="current">00:00</span>
		<span id="duration">00:00</span>
	</div>
</div>

うわさのシークバーです。HTMLは難しい事何もないですね。問題はJavaScriptとCSSです。

<div id="audioarea">
	<audio id="audioplayer"></audio>
</div>

audioタグが生成される部分ですね。変更不可。

	<p>
		<a href="#" class="sounds" data-file="touch" title="Touch Highest Cloud" id="splay">Touch Highest Cloud</a>
	</p>

	<p>
		<a href="#" class="sounds" data-file="subnautica" title="Subnautica" id="splay">Subnautica</a>
	</p>

曲名リンクです。data-fileに曲のURLの最後の部分を入れてもらえばOKです。つまり、URLが http://tamalog.info/music/subnautica.wavならsubnauticaの部分だけ入れてください。title=の部分はプレイヤーに表示される曲名です。曲名を表示させないなら必要ない部分ですね。消しても大丈夫です。

<script src="./soundplayer.js"></script>

JavaScriptのリンクです。必ず最後に挿入してください!

HTML以上!

CSS

とりあえず簡単に見た目を整えただけのCSSです。シークバーだけは必須ですが、他はうまい事やってください!

.musicplayer{
	width: 500px;
	background: #ddd;
	text-align: center;
	padding: 10px;
}

見た目の調節だけ。

widthは幅、backgroundは背景色、text-alignは横のそろえ位置。今回は中央寄せにしました。paddingは内側の余白です。

#seekbar {
	width: 300px;
	height: 15px;
	margin: auto;
	border-radius: 3px;
	border:solid 1px #000;
	background: linear-gradient(#aaa, #aaa) no-repeat #fff;
}

本当に必要なのはこれ!っていうか、最後の一行。}ではないですよ

順番に説明していきます。

heightは高さ。中に再生時間を入れているため少し大きめにしていますが、細い方がスタイリッシュでカッコいいかも。

marginはボックスの外側の余白。autoにすると右と左の余白が同じになってボックスが中央に来る。

border-radiusはボックスの角を丸くする機能。丸くする部分の半径を指定できます。大きくすればするほど丸くなる。

borderはボックスを囲む線。実線で1pxの黒い線で囲ってくださいねって指定してます。

ここ重要!background: linear-gradient(#aaa, #aaa) no-repeat #fff;

曲が進むと背景色が変わっていく仕組みですね。 linear-gradient(#fff,#aaf) このカッコの中がバーの色です。 両方同じ色にすると、グラデーションではなくなります。no-repeat #fff  こっちが背景色。

#time{
	padding: 3px;
	width: 100%;
	font-size: 9px;
	display: flex;
	justify-content:space-between;
	color: #000;
}

これはシークバーの中に表示されている再生時間の表示です。

font-sizeは文字の大きさです。最近はemで設定したりしてますが、僕はついつい未だにpxを使ってしまいます。

displayは表示方法です。flexは説明するとかなり複雑なんですが、簡単に説明すると中の要素を横並びにします。そして、下のjustify-content:space-between;で両端にそろうようにしています。再生経過時間は左に、曲の長さは右になってますよね?それです。

colorは文字色です。

説明はこれで以上です!お疲れさまでした!

まとめ

これ作るのに一か月以上かかりました。色んな所を調べて、改造して動作しなくて・・・みたいなのをずっと繰り返してましたね。最近はお金をかけなくても作曲が出来るようになったので、発表する側になればこういうのも必要かな?って思ってコードを公開する事にしました。是非使ってみてください!

参考にしたサイト様

https://syncer.jp/html5-javascript-hello-button

https://blog.zatsuzen.com/javascript/audio-seekbar/

無料で作曲をしてみよう!DTMのすすめ