2 つの部分に分かれており、前部では主に Html5 が Audio オブジェクトの DOM 操作のためのメソッド、プロパティ、イベントを提供していることを紹介します。
音楽プレーヤーは主に、audio jquery ブートストラップを使用してブラウザの下部に実装されます。
効果：
目次
オーディオオブジェクト
一般的な方法
| 方法 |
説明する |
| 負荷（） |
メディア ファイルをロードし、再生の準備をします。通常は再生前のプリロードに使用されますが、メディア ファイルのリロードにも使用されます。 |
| 遊ぶ（） |
メディア ファイルを再生します。オーディオがロードされていない場合はロードして再生され、オーディオが一時停止されている場合は再生に変わります。 |
| 一時停止（） |
メディア ファイルの再生を一時停止します。 |
| canPlayType() |
ブラウザが指定されたメディア タイプをサポートしているかどうかをテストします。 |
共通の属性
| 属性 |
説明する |
| 現在のソース |
現在のオーディオの URL を返します。 |
| 現在の時刻 |
オーディオ内の現在の再生位置を設定または返します (秒) |
| 間隔 |
オーディオの長さを秒単位で返します。 |
| 終了しました |
オーディオの再生が終了したかどうかを返します。 |
| エラー |
オーディオ エラー状態を表す MediaError を排他的に返します。 |
| 一時停止した |
オーディオを一時停止するかどうかを設定または返します |
| ミュートされた |
音を消すかどうかを設定または戻します |
| 音量 |
オーディオの音量を設定または戻します |
| 自動再生 |
ブール値。このプロパティを宣言すると、オーディオ ファイル全体がダウンロードされるのを待たずに、オーディオができるだけ早く自動的に再生されます。 |
| コントロール |
この属性が宣言されている場合、ブラウザはサウンド、再生の進行状況、再生の一時停止を含むコントロール パネルを提供し、ユーザーがオーディオの再生を制御できるようにします。 |
| ループ |
ブール値。宣言されている場合、オーディオはループします。 |
よくある出来事
| イベント |
説明する |
| 遊ぶ |
play() メソッドが実行されるとトリガーされます |
| 遊んでいる |
プレイ中に発砲 |
| 一時停止 |
メソッドpause()が実行されるとトリガーされます |
| 時間更新 |
再生位置が変更されたときにトリガーされます |
| 終了しました |
再生完了後に再生が停止されるとトリガーされます |
| 待っている |
次のフレームがロードされるのを待っているときに発生します |
| レートチェンジ |
現在の再生レートが変化するとトリガーされます |
| 音量変化 |
音量が変化するとトリガーされます |
| 遊べる |
現在の再生レートでバッファリングが必要な場合にトリガーされます |
| プレイスルーできる |
現在の再生レートでバッファリングが必要ない場合にトリガーされます。 |
| 期間変更 |
再生時間が変更されるとトリガーされます |
| ロードスタート |
ブラウザが Web 上のデータの検索を開始すると起動します。 |
| 進捗 |
ブラウザがメディア ファイルをフェッチしているときにトリガーされます |
| つるす |
ブラウザがメディア ファイルの取得を一時停止し、ファイルの取得が正常に終了しない場合にトリガーされます。 |
| アボート |
メディア データの取得が中止されたときに発生しますが、中止の原因はエラーではありません |
| エラー |
メディア ファイルの取得中にエラーが発生するとトリガーされます |
| 空になった |
ネットワークが初期化されるときにトリガーされます |
| 停滞した |
ブラウザがメディア データの取得に失敗したときに発生します |
| ロードされたメタデータ |
メディアメタデータのロードが完了したときに発生します |
| ロードされたデータ |
現在の位置のメディア再生データがロードされたときにトリガーされます |
| 探しています |
ブラウザがデータをリクエストしているときに発生します |
| 求めた |
ブラウザがデータのリクエストを停止したときに発生します |
上記のメソッド、プロパティ、イベントは JavaScript を通じて操作されます。
音楽プレーヤー
音楽プレーヤーは、サーバー、HTML ページ、スタイル ファイル、スクリプト ファイルの 4 つの部分に分かれています。
HTMLページ
ブートストラップでアイコンを使用するには、css フォルダーと fonts フォルダーを作成する必要があります。
自分でダウンロードできる bootstrap.min.js/bootstrap.min.js 内のすべてのファイルとフォントを紹介します。
内容は以下の通りです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="music_main">
<div class="music_left">
<img class="music_img" id="music_img" src="./img/1.jpg" alt="">
</div>
<audio id="player">
<source src="./audio/不分手的恋爱%20–%20汪苏泷.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<div class="play_left">
<div class="music_title">
<span class="music_name">不分手的恋爱 – 汪苏泷</span>
<span class="totalTimeSpan">/03:25</span>
<span class="playTimeSpan">00:00</span>
</div>
<div class="music_rate">
<div class="music-progress"></div>
</div>
</div>
<div class="play_right">
<i class="glyphicon glyphicon-step-backward" id="music_prev"></i>
<i class="glyphicon glyphicon-play" id="music_dian"></i>
<i class="glyphicon glyphicon-step-forward" id="music_next"></i>
</div>
<div class="music_right">
<ul>
<li><i class="glyphicon glyphicon-volume-up" id="setVolume"></i></li>
<li>
<div class="slider">
<input type="range" id="volume" min="0" max="100" value="0">
</div>
</li>
</ul>
</div>
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/play.js"></script>
</body>
</html>スタイルファイル
このうち音量設定はネット記事から拝借したスライダーを使って実現しています。
内容は以下の通りです。
* {
margin: 0;
padding: 0;
}
.music_main {
position: fixed;
left: 200px;
bottom: 0;
margin-left: 16px;
margin-right: 16px;
height: 70px;
color: #ccc;
width: 80%;
box-shadow: 5px -6px 10px #ccc;
}
.music_left {
float: left;
height: 70px;
margin-right: 10px;
}
.music_img {
width: 70px;
height: 70px;
}
.play_left {
float: left;
width: 450px;
height: 70px;
}
.play_right {
float: left;
width: 400px;
height: 70px;
margin-left: 30px;
color: #000000;
}
.play_left .music_title {
margin-top: 12px;
line-height: 28px;
color: #000000;
}
.play_left .music_title .music_name {
float: left;
font-size: 18px;
}
.play_left .music_title .playTimeSpan {
float: right;
}
.play_left .music_title .totalTimeSpan {
float: right;
}
.play_left .music_rate {
float: left;
width: 98%;
height: 5px;
background: #ccc;
margin-top: 8px;
margin-left: 8px;
border-radius: 2px;
}
.play_left .music-progress {
height: 5px;
background: #ffb800;
border-radius: 2px;
width: 0;
}
.music_right {
width: 500px;
height: 70px;
float: left;
color: #000000;
}
.music_right ul {
list-style: none;
}
.music_right ul li {
float: left;
margin-left: 32px;
}
#music_prev {
line-height: 70px;
font-size: 24px;
margin-left: 126px;
margin-right: 21px;
cursor: pointer;
}
#music_dian {
line-height: 70px;
font-size: 24px;
margin-left: 21px;
margin-right: 21px;
cursor: pointer;
}
#music_next {
line-height: 70px;
font-size: 24px;
margin-left: 21px;
cursor: pointer;
}
#setVolume {
line-height: 70px;
font-size: 24px;
cursor: pointer;
}
.slider {
position: absolute;
top: 50%;
left: 73%;
transform: translate(-50%, -50%);
width: 200px;
height: 14px;
padding: 14px 0 14px 10px;
border-radius: 14px;
display: flex;
align-items: center;
}
.slider p {
font-size: 26px;
font-weight: 600;
padding-left: 30px;
}
.slider input[type="range"] {
-webkit-appearance: none !important;
width: 200px;
height: 2px;
background: #ffdf1f;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 30px;
height: 30px;
background: black;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: black;
}スクリプトファイル
プレーヤーの楽曲情報の割り当て、再生の一時停止、曲の切り替え、音量の設定などの機能をjsを使用して実現します。
このうち代入部分ですが、ajaxリクエストはデフォルトでは非同期になっているため、代入に問題が発生するため、同期リクエストに変更します。
内容は以下の通りです。
window.onload = function () {
// 绑定音频元素
var $player = document.getElementById('player');
// 绑定播放按钮
var $dian = document.getElementById('music_dian');
// 设置音频初始属性
var volume_num = 0.5;
// 当前歌曲索引
var currentIndex = 0;
// 设置播放列表
var music_list = [{
'id': 1,
'cover': './img/1.jpg',
'singer': '汪苏泷',
'song_name': '不分手的恋爱',
'song_path': '../audio/不分手的恋爱%20–%20汪苏泷.mp3'
},];
// 初始化设置
setInit();
// 绑定音频控制开关
$dian.onclick = function () {
if (this.classList == 'glyphicon glyphicon-play') {
this.className = 'glyphicon glyphicon-pause';
$player.play();
} else {
// layui-icon-pause
this.className = 'glyphicon glyphicon-play';
$player.pause();
}
};
// 设置播放器初始属性
function setInit() {
// 设定音量
$player.volume = volume_num;
$('#volume').val(volume_num * 100);
// 通过同步方式获取播放列表信息
$.ajaxSettings.async = false;
$.getJSON('./service.php', {}, function (res) {
// 赋值播放列表
music_list = res;
});
// 设定歌曲封面
$('#music_img').attr('src', music_list[0].cover);
// 设定歌曲名称和歌手
$('.music_name').text(music_list[0].song_name + ' - ' + music_list[0].singer);
// 设定歌曲路径
$player.src = music_list[0].song_path;
}
// 监听播放器播放时间改变事件
$player.addEventListener('timeupdate', function () {
// 当前播放时间
var currentTime = $player.currentTime;
// 总时间
var totalTime = $player.duration;
// 当是数字的时候
if (!isNaN(totalTime)) {
// 得到播放时间与总时长的比值
var rate = currentTime / totalTime;
// 设置时间显示
// 播放时间
$('.playTimeSpan').text(musicTime(currentTime));
// 总时长
$('.totalTimeSpan').text('/' + musicTime(totalTime));
// 设置进度条
$('.music-progress').css('width', rate * 441 + 'px');
}
});
// 设置音量
$('#volume').change(function () {
volume_num = $(this).val();
$player.volume = volume_num * 0.01
});
// 上一首
$('#music_prev').click(function () {
if (currentIndex > 0) {
currentIndex -= 1;
} else {
// 切换到最后一首
currentIndex = music_list.length - 1;
}
// 设置播放标识为暂停
$dian.className = 'glyphicon glyphicon-play';
// 播放时间
$('.playTimeSpan').text('00:00');
// 设置歌曲进度归零
$('.music-progress').css('width', '1px');
// 设置歌曲
setMusic();
});
// 下一首
$('#music_next').click(function () {
if (currentIndex < (music_list.length - 1)) {
currentIndex += 1;
} else {
// 切换为第一首
currentIndex = 0;
}
// 设置播放标识为暂停
$dian.className = 'glyphicon glyphicon-play';
// 播放时间
$('.playTimeSpan').text('00:00');
// 设置歌曲进度归零
$('.music-progress').css('width', '1px');
// 设置歌曲
setMusic();
});
// 设置播放器歌曲信息
function setMusic() {
// 设定歌曲封面
$('#music_img').attr('src', music_list[currentIndex].cover);
// 设定歌曲名称和歌手
$('.music_name').text(music_list[currentIndex].song_name +
' - ' + music_list[currentIndex].singer);
// 设定歌曲路径
$player.src = music_list[currentIndex].song_path;
}
// 歌曲时长（00:00）
function musicTime(sens) {
// 分
var m = parseInt(sens / 60);
// 秒
var s = parseInt(sens % 60);
// 补零
m = m > 9 ? m : "0" + m;
s = s > 9 ? s : "0" + s;
return m + ":" + s;
}
};サーバ
php 言語は単純なプレーヤーなので主にデータを返すために使用されますが、ここではデータを json 形式で返すだけですが、通常のプロジェクトではデータ処理を行ってから形式出力を行う必要があります。
内容は以下の通りです。
header('content-type:text/html;charset=utf8 ');
$arr = [
[
'id' => 1,
'cover' => './img/1.jpg',
'singer' => '汪苏泷',
'song_name' => '不分手的恋爱',
'song_path' => './audio/不分手的恋爱%20–%20汪苏泷.mp3'
],
[
'id' => 2,
'cover' => './img/2.jpg',
'singer' => '张镐哲',
'song_name' => '不是我不小心',
'song_path' => './audio/不是我不小心%20–%20张镐哲.mp3'
],
[
'id' => 3,
'cover' => './img/3.jpg',
'singer' => '郑源&陶钰玉',
'song_name' => '不要在我寂寞的时候说爱我',
'song_path' => './audio/不要在我寂寞的时候说爱我%20–%20郑源&陶钰玉.mp3'
],
[
'id' => 4,
'cover' => './img/4.jpg',
'singer' => '齐秦',
'song_name' => '不让我的眼泪陪我过夜',
'song_path' => './audio/不让我的眼泪陪我过夜%20–%20齐秦.mp3'
],
];
echo json_encode($arr);要約する
ブラウザの下部にホバリングを固定して実装された音楽プレーヤー。主に、曲情報の表示、曲の再生と一時停止、曲の再生後の対応する進行状況の表示、音量の調整 (デフォルトは 50%)、ロゴによる曲の切り替えを実現します。
音楽プレーヤーの練習を通じて、オーディオの属性とイベントをより深く理解し、それらを適用する方法をマスターしました。次は、より複雑なアプリケーションを作成する予定です。
参考記事