ミュージックプレーヤー設定

Plain Jane および Plain Jane Interactive 向け

このビデオで学べること

  • 組み込みのミュージックプレーヤーを有効化およびカスタマイズする方法

  • 独自のオーディオファイルをアップロードして設定する方法

  • ディスクアート、モバイル表示、カウントダウン統合などの高度なオプション

  • 異なるデバイス向けのスタイリングおよび位置設定オプション

📂 ミュージックプレーヤー設定にアクセス

  1. Shopify管理画面から、次へ移動します オンラインストア > テーマ

  2. をクリック カスタマイズ アクティブなPlain Janeテーマの隣にある

  3. テーマエディタで、を開きます テーマ設定 パネル（絵の具ブラシのアイコン）

  4. を選択します ミュージックプレーヤー メニューから

🎧 基本設定

ミュージックプレーヤーを有効化

  • ミュージックプレーヤーを表示：デスクトップでミュージックプレーヤーを有効にする切替

  • モバイルでミュージックプレーヤーを表示：任意のモバイル表示制御

  • カウントダウンミュージック：パスワードページのカウントダウン機能との統合

オーディオファイルの設定

  • 音楽のURL：オーディオファイルをアップロード（MP3、WAV、OGG形式をサポート）

  • オーディオのプリロード：より速い再生のためにメタデータを自動的にプリロードします

  • 自動再生：ページ読み込み時に音楽が再生を開始します（ブラウザのポリシーに従います）

💡 注記：現代のブラウザはユーザー操作があるまで音声付きの自動再生をブロックすることが多いです。

🎨 ビジュアルカスタマイズ

ディスク画像の表示

  • ディスクを表示：回転するディスク／ビニールレコードの見た目を表示する切替

  • ディスクのカバー画像：カスタムアルバムアートをアップロード（推奨：最小200x200px）

  • ディスクの回転：音楽再生中のアニメーションでの回転効果

プレーヤーコントロール

  • ミュージックプレーヤーボタンの色：再生／一時停止ボタンの色をカスタマイズ

  • 再生ボタン：大きくアクセスしやすい再生コントロール

  • 進行バー：再生進行の視覚的インジケーター

  • ナビゲーションコントロール：再生／一時停止機能

📱 モバイル最適化

モバイル表示オプション

  • モバイルでミュージックプレーヤーを表示：モバイルでの表示を個別に制御

  • モバイル再生の配置：ディスクが非表示のときの自動配置調整

  • レスポンシブデザイン：プレーヤーは異なる画面サイズに合わせて調整されます

モバイル専用機能

  • タッチに適したコントロール：モバイル向けに最適化されたボタンサイズ

  • 帯域幅に関する配慮：データ節約のためにモバイルで無効にするオプション

  • パフォーマンス最適化：軽量なモバイルエクスペリエンス

🎵 高度な機能

曲情報の表示

  • 現在のトラック名：楽曲バーに表示されます

  • トラックタイトル：カスタマイズ可能なトラック情報

  • 進行状況の追跡：リアルタイムの再生進行

統合オプション

  • パスワードページとの統合：カウントダウンタイマー中に音楽を再生できます

  • テーマの同期：全体のテーマアニメーションと連携します

  • ページ間の継続再生：設定されていればユーザーが移動しても音楽が継続します

⚙️ 技術的設定

オーディオ設定

  • メタデータのプリロード：初期読み込み時間を短縮

  • オーディオ要素：フォールバック対応のHTML5オーディオ

  • ファイル形式のサポート：MP3（推奨）、WAV、OGG

  • ブラウザ互換性：現代のすべてのブラウザで動作します

パフォーマンスに関する考慮事項

  • ファイルサイズ：最適なパフォーマンスのためにオーディオファイルは5MB未満に保ってください

  • 読み込み戦略：速度と機能性のバランスのためのメタデータプリロード

  • モバイルデータ：モバイルユーザーのデータ使用量を考慮してください

🎯 ベストプラクティス

オーディオファイルの準備

  • フォーマット：互換性とファイルサイズのバランスのためにMP3を使用してください

  • 品質：128〜256 kbpsは良好な品質と合理的なファイルサイズを提供します

  • 長さ：バックグラウンドミュージックには短いループや環境音楽を検討してください

  • 音量：突発的な音量変化を防ぐために音量レベルを正規化してください

ユーザーエクスペリエンス

  • 控えめな実装：背景音楽は注意をそらすのではなく補完するべきです

  • ユーザーコントロール：常に明確な再生／一時停止コントロールを提供してください

  • モバイルに関する配慮：帯域幅が限られたモバイルデバイスでテストしてください

  • アクセシビリティ：コントロールがキーボードで操作可能であることを確認してください

🔧 トラブルシューティング

一般的な問題

音楽が自動再生されない理由

  • 現代のブラウザは音声を再生する前にユーザーの操作を要求します

モバイルパフォーマンス

  • 大きなオーディオファイルはモバイルのパフォーマンスに影響を与える可能性があります

  • データに敏感なユーザーのためにモバイルで無効にすることを検討してください

  • ブラウザの開発者ツールだけでなく実際のモバイルデバイスでテストしてください

ファイル読み込みの問題

  • オーディオファイルのURLがアクセス可能であることを確認してください

  • ファイル形式の互換性を確認してください

  • ファイルサイズが大きすぎないことを確認してください

ブラウザサポート

  • Chrome/Edge：すべての機能を完全にサポート

  • Safari：自動再生ポリシーがより厳しい場合があります

  • Firefox：標準的な構成で良好なサポート

  • モバイルブラウザ：デバイスおよびブラウザによって異なります

前へメインテーマカラー次へSEO 設定

最終更新