Wix オーディオプレーヤー:Wix オーディオプレーヤーを追加・設定する

読了時間:7分
Wix オーディオプレーヤーは、サイトのページに単一の楽曲を追加できる、スタイリッシュでシンプルな音楽パーツです。希望するプレーヤーのスタイルを選択し、楽曲とカバー画像を追加してデザインをカスタマイズしましょう。
ライブサイトでオーディオプレーヤーが表示されたスクリーンショット。

ステップ 1 | サイトにプレーヤーを追加する

まず、プレーヤーを追加します。クラシックオーディオプレーヤーまたは再生アイコンのみが表示されるプレーヤーから選択できます。
Wix エディタ
Wix Studio エディタ
  1. エディタ左側の「パーツを追加 をクリックします。
  2. 動画・音楽」をクリックします。
  3. オーディオプレーヤー」をクリックします。
  4. プレーヤーを選択し、ページ上の該当する場所にドラッグします。
エディタメニューでオーディオプレーヤーパーツのパネルが表示されたスクリーンショット

ステップ 2 | オーディオプレーヤーを設定する

次に、プレーヤーを設定します。楽曲をアップロードし、画像と楽曲の詳細を追加して、プレーヤーの再生設定を定義します。
Wix エディタ
Wix Studio エディタ
  1. エディタでプレーヤーをクリックします。
  2. 設定」アイコン  をクリックします。
  3. 次のオプションを使用してプレーヤーを設定します:
    • 画像を選択:プレーヤーに表示する画像を選択し、「ページに追加」をクリックします。
    • オーディオ形式を選択:
      • 1曲:「楽曲をアップロード」をクリックしてメディアマネージャーにアクセスします。楽曲を選択し、「楽曲を追加」をクリックします。
      • 外部 MP3:再生したい楽曲の URL を入力します。
    • 楽曲の詳細:アーティストと曲名を入力します。
    • 再生オプション:次の中からオプションを選択します:
      • 一回のみ再生:楽曲は 1回再生されます。
      • ループ再生:楽曲はループ再生されます。
Wix エディタの Wix オーディオプレーヤー設定パネルのスクリーンショット

ステップ 3 | プレーヤーのレイアウトとデザインをカスタマイズする

最後に、プレーヤーのレイアウトとデザインをカスタマイズして、サイトのスタイルに合わせます。
Wix エディタ
Wix Studio エディタ
  1. エディタでプレーヤーをクリックします。
  2. レイアウト」アイコン  をクリックし、「クラシック」または「アイコン」のレイアウトを選択ます。
    注意:「クラシック」レイアウトを選択した場合、再生バーや日付などの表示情報を選択することができます。
  3. デザイン」アイコンをクリックし、下記をカスタマイズします:
    • クラシックレイアウト:プレーヤーの通常時とホバー時の表示をカスタマイズします。
      • 通常時:
        • 色・不透明度:プレーヤーの背景色を選択し、不透明度を調整します。
        • 枠線:プレーヤーの枠線の色と太さを調整します。
        • :角の丸みを調整してプレーヤーの形を変更します。
        • テキスト:プレーヤーのテキストとコントロールのフォントと色を選択し、サイズを調整します。
      • ホバー:訪問者がプレーヤーにマウスオーバーした際のテキストとコントロールの色を選択します。
    • アイコンレイアウト:希望のアイコンを選択し、「デザインをカスタマイズ」をクリックします。
      • 通常時:アイコンの色を選択し、不透明度を調整します。
      • ホバー:訪問者がプレーヤーにマウスオーバーした際のコントロールの色を選択します。
オーディオプレーヤーのデザインオプションのスクリーンショットで、「通常時」と「ホバー」オプションがハイライトされています。

Wix オーディオプレーヤーに関する問題のトラブルシューティング

以下をクリックして、問題の解決方法を確認してください:

まだサポートが必要な場合

継続して問題が発生している場合、次の情報を含め、お問い合わせください。
  • アップロードしようとしている音楽ファイル / 埋め込もうとしているリンク。
  • 使用しているウェブブラウザの名前とバージョン。
  • コンピュータのオペレーティングシステムの名前とバージョン。
  • Console ビューのスクリーンショット(下記手順参照):
    1. Google Chrome でシークレットウィンドウを開きます。(Ctrl + Shift + N
    2. Wix にログインして、エディタを開きます。
    3. キーボードショートカット(PC の場合:Ctrl + Shift + J )、(Mac の場合:Cmd + Option + J )を使用します。
    4. パネル上部の「Console(コンソール)」タブをクリックし、ページを更新(F5)します。
    5. このタブのスクリーンショットを撮影します。

よくある質問

詳細については以下の質問をクリックしてください。

お役に立ちましたか?

|