私はHTML5とJavaScript APIの大ファンであり、GetUsermedia、Webスピーチ、スクリーンオリエンテーションAPI（専用のGithubリポジトリを使用）を含む多くの人を探索しました。この記事では、ユーザーエクスペリエンスを強化するためにいくつかのAPIを活用するモバイルに優(yōu)しいJavaScriptオーディオプレーヤーの構築を示しています。
主要な機能：
このJavaScriptオーディオプレーヤーは、アンビエントライト、近接、バッテリーステータス、Web通知、および振動APIを利用して、レスポンシブで魅力的なモバイルエクスペリエンスを作成します。 特定のAPIがサポートされていなくても、進行性の強化で構築され、正しく機能します。 具體的には、周囲の光に基づいてテーマを適応させ、近接に基づいて一時停止/再生し、バッテリーレベルに基づいて再生を管理し、ユーザーに通知し、必要に応じてハプティックフィードバックを提供します。 コードはgithubで利用でき、ライブデモが提供されます。
api使用率：
プレーヤーはこれらのAPIを採用しています：
アンビエントライトAPI：- 周囲の光レベルに応じてWebページのテーマ（Dark/Light）を動的に調整します。
近接API：
近接センサーの検出に基づいてオーディオを再生/一時停止します。-
バッテリーステータスAPI：
バッテリーレベルを監(jiān)視し、非常に低いときにオーディオを一時停止します。
-
web通知API：バッテリーとオーディオの一時停止についてユーザーに警告します。
- 振動api：バッテリーレベルの通知を強化するための觸覚フィードバックを提供します。
チュートリアルは、これらのAPIに精通しています。 プレーヤーは、ネイティブのHTML5- 要素をフォールバックとして使用し、要素がサポートされていない場合にメッセージを表示します。
html構造：
HTMLは簡単です。簡単な説明、ネイティブコントロールを有効にした<audio></audio>要素（
屬性）、CSS StyleSheetリンク、およびJavaScriptファイルの包含。
には最初はクラスがあります。
<audio></audio>cssスタイリング：controlsbody
normal-themeCSSは、
および3つのテーマのスタイル（
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mobile Audio Player</title>
<meta name="description" content="APIs-powered Audio Player">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.miracleart.cn/link/1dfd06d3b151a21b879f3710d6b49786">
</head>
<body class="normal-theme">
<h1>APIs-powered Audio Player</h1>
<p>This demo showcases a simple APIs-powered audio player using the Proximity, Battery Status, Vibration, Web Notifications, and Ambient Light APIs.</p>
<audio id="audio" src="http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3" controls>
<p>Your browser doesn't support the <code>audio</code> element.</p>
</audio>
<??>
</body>
</html>、
、）を定義します。
javaScriptロジック：bodydark-theme
normal-themeJavaScriptコードは、最初にAPIサポートのテストを行い、次に、しきい値と通知メッセージの構成設定を定義します。オーディオ要素を取得し、API機能を実裝します：近接ベースの再生制御、光レベルに基づくテーマの切り替え、通知と振動フィードバックによるバッテリーレベルの監(jiān)視。 完全なコードはgithubで利用できます。light-theme
body {
max-width: 600px;
margin: 0 auto;
font-size: 20px;
padding: 0 1em;
}
.dark-theme {
background-color: #000000;
color: #FFFFFF;
}
.normal-theme {
background-color: #B8FFF7;
color: #C53131;
}
.light-theme {
background-color: #FFFFFF;
color: #000000;
}結論：
このチュートリアルは、機能が豊富なモバイルアプリケーションの作成におけるJavaScript APIの力を示しています。 強化されたユーザーエクスペリエンスは、魅力的で応答性の高いモバイル中心のアプリケーションを構築するためのこれらのAPIの可能性を示しています。 GitHubリポジトリとライブデモをさらに探索するために利用できます。
よくある質問（FAQ）：（これらのFAQは元の入力から保持されますが、それらの配置はより良い流れと読みやすさのために調整されます。）
FAQSセクション、プレイリストの機能、カスタムコントロール、応答性、WebオーディオAPI統(tǒng)合、進行狀況、ボリュームとミュートコントロール、ループとシャッフルの機能、およびダウンロードボタンは、元の出力で利用できます。 >
以上がモバイルJavaScriptを搭載したオーディオプレーヤーの構築の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。