ネイティブ JS 音楽プレーヤー

この記事の例では、音楽プレーヤーを実装するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

まず、HTML を使用してフレームワーク構造を構築します。このステップでは、コードの読みやすさを向上させるために、より多くのコメントを記述します。

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
 <メタ文字セット="UTF-8">
 <title>ネイティブ JS 音楽プレーヤー</title>
 <link rel="スタイルシート" href="css/public.css" >
 <link rel="スタイルシート" href="css/css.css" >
 </head>
 <本文>
 <!-- 音楽プレーヤー -->
 <div class="音楽">
 <!-- 曲情報-->
 <div class="word">
 <div class="clears"></div>
 <!-- 曲のカバー -->
 <div class="img">
 <img src="images/1.jpg" id="img" alt="" /></div>
 <!-- 歌カバー終了 -->
 </div>
 <!-- 曲情報終了 -->
 <!-- 情報とボリューム -->
 <div class="mtv">
 <!-- テキスト情報 -->
 <div class="text">
 <h1 id="sName">曲名</h1>
 <h2 id="singer">歌手</h2>
 </div>
 <!-- テキストメッセージ終了 -->
 <!-- ボリュームコントロール -->
 <div class="vol01">
 <div class="volTop" id="volText">
 100%
 </div>
 <div class="volBottom">
 <div class="volPro" id="vol">
 <div class="volColor" id="volCol"></div>
 <div class="volBlock" id="volB"></div>
 </div>
 <div class="vImg">
 <img src="images/volume.png" alt="" />
 </div>
 </div>
 </div>
 <!-- ボリュームコントロール終了 -->
 </div>
 <!-- 情報とボリュームの終了 -->
 <!-- 進捗状況バー -->
 <div class="進捗">
 <span class="cTime time" id="cTime">00:00</span> <!-- 現在の時刻 -->
 <span class="tTime time" id="tTime">00:00</span> <!-- 合計時間 -->
 <div class="clears"></div>
 <!-- 小さな進捗バー -->
 <div class="proBar" id="songPro">
 <div class="proColor" id="proBar"></div>
 </div>
 <!-- 進捗バー終了 -->
 </div>
 <!-- 進捗バー終了 -->
 <!-- コントロール ボタン -->
 <div class="ctrls">
 <div class="btn">
 <img src="images/prev.png" class="prevBtn" id="prevBtn" alt="" />
 <img src="images/next.png" class="nextPrev" id="nextBtn" alt="" />
 </div>
 <button type="button" class="playBtn" id="playBtn"><img src="images/再生.png" alt="" /></button>
 </div>
 <!-- コントロール ボタン終了 -->
 <audio src="#" id="音楽"></audio>
 </div>
 <!-- 音楽プレーヤー終了 -->
 <script src="js/js.js"></script>
 </本文>
</html>

2 番目のステップは、フレームワークを設定した後、 CSSを使用して好みのスタイルを適用することです。コードの再利用性を高めるために、スタイルをパブリックスタイルと独立スタイルに分けて別々に記述していることに注意してください。もちろん、SASS を使用して利便性を高めることもできます。ここでは独立スタイルのみを提供し、パブリックスタイルはオンラインで見つけることができます。

html{
 背景: #92b991;
}

。音楽 {
 幅: 670ピクセル;
 高さ: 400px;
 背景: url("../images/bg.jpg") 繰り返しなし 中央;
 左マージン: 自動;
 右マージン: 自動;
 境界線: 1px #3d5e59 実線;
 上マージン: 150px;
 境界線の半径: 20px;
 ボックスの影: 0 0 20px rgba(0, 0, 0, 0.3);
 位置: 相対的;
}

.img {
 幅: 200ピクセル;
 高さ: 200px;
 境界線: 2px #fff 実線;
 オーバーフロー: 非表示;
 境界線の半径: 100%;
 上マージン: 50px;
 左マージン: 35%;
}

.mtv {
 幅: 670ピクセル;
 位置: 相対的;
}

。文章 {
 色: #fff;
 右マージン: 30px;
 左マージン: 30px;
 下マージン: 10px;
}

.text>h1 {
 フォントサイズ: 24px;
 行の高さ: 30px;
 フォントの太さ: 標準;
}

.text>h2 {
 フォントファミリ: "Microsoft YaHei";
 フォントサイズ: 14px;
 フォントの太さ: 300;
 行の高さ: 1.7;
}

.vol01 {
 位置: 絶対;
 高さ: 30px;
 幅: 120ピクセル;
 右: 30px;
 上位: -8%;
}

.volPro {
 幅: 100%;
 高さ: 5px;
 上マージン: 44.5px;
 境界線: 1px #fff 実線;
 境界線の半径: 5px;
}

.volColor{
 高さ: 5px;
 幅: 100%;
 色: #fff;
 ポインタイベント: なし;
}

.volブロック{
 ポインタイベント: なし;
 位置: 絶対;
 上: 42px;
 幅: 10px;
 高さ: 10px;
 境界線: 1px #fff 実線;
 背景: #f4f3f3;
 境界線の半径: 100%;
 左: 100%;
 左マージン: -5px;
}

.volトップ{
 色: #fff;
 フォントサイズ: 10px;
 位置: 絶対;
 上: 25px;
 右: 0;
 -webkit-touch-callout: なし;
 -webkit-user-select: なし;
 -khtml-ユーザー選択: なし;
 -moz-user-select: なし;
 -ms-user-select: なし;
 ユーザー選択: なし;
}

.vImg {
 位置: 絶対;
 上: 38px;
 左: -26px;
 -webkit-touch-callout: なし;
 -webkit-user-select: なし;
 -khtml-ユーザー選択: なし;
 -moz-user-select: なし;
 -ms-user-select: なし;
 ユーザー選択: なし;
}

。時間 {
 フォントファミリ: "Microsoft YaHei";
 フォントサイズ: 10px;
 行の高さ: 1.5;
 色: #fff;
 上マージン: 25px;
}

.c時間{
 フロート: 左;
 -webkit-touch-callout: なし;
 -webkit-user-select: なし;
 -khtml-ユーザー選択: なし;
 -moz-user-select: なし;
 -ms-user-select: なし;
 ユーザー選択: なし;
}

.t時間{
 フロート: 右;
 -webkit-touch-callout: なし;
 -webkit-user-select: なし;
 -khtml-ユーザー選択: なし;
 -moz-user-select: なし;
 -ms-user-select: なし;
 ユーザー選択: なし;
}

。進捗 {
 左マージン: 30px;
 右マージン: 30px;
}

.proBar{
 幅: 100%;
 高さ: 2px;
 オーバーフロー: 非表示;
 背景: #B292FF;
 上マージン: 5px;
 境界線の半径: 5px;
}

.proColor{
 高さ: 7px;
 幅: 30%;
 背景: #fff;
 ポインタイベント: なし;
}

.ctrls{
 テキスト配置: 中央;
 上マージン: 20px;
 左マージン: 30px;
 右マージン: 30px;
}

.btn{
 位置: 絶対;
 上: 50px;
}

.次前へ {
 右: 0;
 左マージン: 200px;
 不透明度: 0.1;
 遷移: すべて 0.3 秒;
}

.nextPrev:hover {
 不透明度: 0.5;
}

.prevBtn{
 左: 0;
 不透明度: 0.1;
 遷移: すべて 0.3 秒;
}

.prevBtn:hover {
 不透明度: 0.5;
}

.playBtn{
 高さ: 200px;
 幅: 200ピクセル;
 境界線の半径: 200px;
 不透明度: 0.3;
 位置: 絶対;
 上: 52px;
 左: 250px;
 左マージン: -14px;
 遷移: すべて 0.3 秒;
}


.playBtn:hover {
 不透明度: 0.5;
 背景: #46847b;
}

3 番目のステップは、JS を使用して機能を追加し、音楽プレーヤーに魂を与えることです。

1. ID を取得します(もちろん、自分の習慣に応じて、ここでクラス名または要素を取得することもできます)。

music = document.getElementById("music"); とします。
playBtn を document.getElementById("playBtn"); にします。
prevBtn = document.getElementById("prevBtn"); とします。
nextBtn = document.getElementById("nextBtn"); とします。
img = document.getElementById("img"); とします。
sName = document.getElementById("sName"); とします。
歌手 = document.getElementById("歌手");
tTime = document.getElementById("tTime"); とします。
proBar = document.getElementById("proBar"); とします。
cTime を document.getElementById("cTime"); とします。
songPro を document.getElementById("songPro"); とします。
vol = document.getElementById("vol"); とします。
volCol = document.getElementById("volCol"); とします。
volB = document.getElementById("volB"); とします。
volText = document.getElementById("volText"); とします。

2. 音楽再生機能を追加します。

音楽のインポート

曲を = [{
 mp3: "音楽/01.mp3",
 歌手：「趙薇」、
 名前: 「あなたと別れることはできない」
 画像: "images/1.jpg"
 }, {
 mp3: "音楽/04.mp3",
 歌手: "陈粒",
 名前:「可燃性および爆発性」
 画像: "images/2.jpg"
 }, {
 mp3: "音楽/06.mp3",
 歌手：「胡夏/于可薇」
 名前: 「ご存知ですか?」
 画像: "images/3.jpg"
 }];

音楽再生

changeMusic = function(index) {
 music.src = songs[インデックス].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 歌手.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };

 インデックスを 0 にします。
 音楽を変更します(インデックス);

音楽の再生を一時停止する

playBtn.addEventListener("クリック", function(イベント) {
 if (音楽が一時停止) {
 音楽を再生します。
 event.currentTarget.innerHTML = '<img src="images/pause.png" alt=""/>';
 } それ以外 {
 音楽.一時停止();
 event.currentTarget.innerHTML = '<img src="images/play.png" alt=""/>';
 }
 });

ミュージックスイッチ

prevBtn.addEventListener("click", function(event) { //前のインデックス--;
 （インデックス<= -1）の場合{
 インデックス = songs.length - 1;
 }
 音楽を変更します(インデックス);
 });

 nextBtn.addEventListener("click", function(event) { //次の曲のインデックス++;
 if (インデックス > songs.length - 1) {
 インデックス = 0;
 }
 音楽を変更します(インデックス);
 });
 
 music.addEventListener('ended',function () { //次の曲を自動的に再生しますindex++;
 if (インデックス > songs.length - 1) {
 インデックス = 0;
 }
 音楽を変更します(インデックス);
 })

3. 進行状況バーを追加します。

music.addEventListener("loadedmetadata", function(event) { //オーディオメタデータがロードされたことを表示する tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });
 
 music.addEventListener("timeupdate", function(event) { //音楽再生イベントをリッスンする let jd = music.currentTime / music.duration;
 bfb = jd * 100 + "%"とします。
 proBar.style.width を bfb に設定します。
 （音楽の現在の時間<10）{
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime); 
 } そうでない場合 (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } それ以外 {
 minet = parseInt(music.currentTime / 60); とします。 
 sec = music.currentTime - minet * 60 とします。
 （秒<10）の場合{
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(秒);
 } それ以外 {
 cTime.innerHTML = "0" + minet + ":" + parseInt(秒);
 }
 }
 });

小さな機能:進行状況バーをクリックすると、音楽が変わり、指定された時間にジャンプします。

songPro.addEventListener("クリック", function(イベント) {
 x = event.offsetX とします。
 bfb = x / 610 * 100とします。
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

4. 音量調整モジュールを追加します。

getBfb = 関数(イベント) {
 let x = event.clientX; //イベントがトリガーされたときのブラウザ ページ (またはクライアント領域) に対するマウス ポインターの水平座標を返します。
 let volX = vol.getBoundingClientRect().x; //getBoundingClientRect() は要素の幅と高さを取得します。let disX = x - volX;
 disX = Math.max(0, disX); // 最大値を返します disX = Math.min(120, disX); // 最小値を返します return disX / 120;
 };

 setVol = function(イベント) {
 bfb = Math.floor(getBfb(event) * 10000) / 100 とします。
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 音楽の音量をbfb/100に設定します。
 };

 vol.addEventListener("mousedown", 関数() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", 関数() {
 document.removeEventListener("mousemove", setVol);

 });

すべてのJSコード

ここでは {} スコープを使用しているため、let または const によって宣言された変数は、let または const コマンドが配置されているコードブロック {} 内でのみ有効であり、{} (ECMAScript 6 (略して ES6) で新しく追加) の外部からはアクセスできません。

{
 music = document.getElementById("music"); とします。
 playBtn を document.getElementById("playBtn"); にします。
 prevBtn = document.getElementById("prevBtn"); とします。
 nextBtn = document.getElementById("nextBtn"); とします。
 img = document.getElementById("img"); とします。
 sName = document.getElementById("sName"); とします。
 歌手 = document.getElementById("歌手");
 tTime = document.getElementById("tTime"); とします。
 proBar = document.getElementById("proBar"); とします。
 cTime を document.getElementById("cTime"); とします。
 songPro を document.getElementById("songPro"); とします。
 vol = document.getElementById("vol"); とします。
 volCol = document.getElementById("volCol"); とします。
 volB = document.getElementById("volB"); とします。
 volText = document.getElementById("volText"); とします。

 曲を = [{
 mp3: "音楽/01.mp3",
 歌手：「趙薇」、
 名前: 「あなたと別れることはできない」
 画像: "images/1.jpg"
 }, {
 mp3: "音楽/04.mp3",
 歌手: "陈粒",
 名前:「可燃性および爆発性」
 画像: "images/2.jpg"
 }, {
 mp3: "音楽/06.mp3",
 歌手：「胡霞/譚維薇」
 名前: 「ご存知ですか?」
 画像: "images/3.jpg"
 }];

 changeMusic = function(index) {
 music.src = songs[インデックス].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 歌手.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };

 インデックスを 0 にします。
 音楽を変更します(インデックス);

 playBtn.addEventListener("クリック", function(イベント) {
 if (音楽が一時停止) {
 音楽を再生します。
 event.currentTarget.innerHTML = '<img src="images/pause.png" alt=""/>';
 } それ以外 {
 音楽.一時停止();
 event.currentTarget.innerHTML = '<img src="images/play.png" alt=""/>';
 }
 });

 prevBtn.addEventListener("click", function(event) { //前のインデックス--;
 （インデックス<= -1）の場合{
 インデックス = songs.length - 1;
 }
 音楽を変更します(インデックス);
 });

 nextBtn.addEventListener("click", function(event) { //次の曲のインデックス++;
 if (インデックス > songs.length - 1) {
 インデックス = 0;
 }
 音楽を変更します(インデックス);
 });
 
 music.addEventListener('ended',function () { //次の曲を自動的に再生しますindex++;
 if (インデックス > songs.length - 1) {
 インデックス = 0;
 }
 音楽を変更します(インデックス);
 })

 music.addEventListener("loadedmetadata", function(event) { //オーディオメタデータがロードされたことを表示する tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });

 music.addEventListener("timeupdate", function(event) { //音楽再生イベントを聴く let jd = music.currentTime / music.duration; //music.durationの合計継続時間 music.currentTime 現在の継続時間 let bfb = jd * 100 + "%";
 proBar.style.width を bfb に設定します。
 （音楽の現在の時間<10）{
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime); //Math.floor() は切り捨てます} else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } それ以外 {
 let minet = parseInt(music.currentTime / 60); //parseInt() は文字列を解析し、整数を返します。let sec = music.currentTime - minet * 60;
 （秒<10）の場合{
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(秒);
 } それ以外 {
 cTime.innerHTML = "0" + minet + ":" + parseInt(秒);
 }
 }
 });

 songPro.addEventListener("クリック", function(イベント) {
 x = event.offsetX とします。
 bfb = x / 610 * 100とします。
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

 getBfb = 関数(イベント) {
 let x = event.clientX; //イベントがトリガーされたときのブラウザ ページ (またはクライアント領域) に対するマウス ポインターの水平座標を返します。
 let volX = vol.getBoundingClientRect().x; //getBoundingClientRect() は要素の幅と高さを取得します。let disX = x - volX;
 disX = Math.max(0, disX); // 最大値を返します disX = Math.min(120, disX); // 最小値を返します return disX / 120;
 };

 setVol = function(イベント) {
 bfb = Math.floor(getBfb(event) * 10000) / 100 とします。
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 音楽の音量をbfb/100に設定します。
 };

 vol.addEventListener("mousedown", 関数() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", 関数() {
 document.removeEventListener("mousemove", setVol);

 });
}

最終効果表示: