如何在Wix网站实现仅含播放/暂停功能的简易音频播放器？

Hey there! I’ve run into similar Wix DOM restriction issues before, so let’s break down how to fix this and get that play/pause-only audio player working. The core problem here is that Wix’s page code runs in a sandboxed environment—you can’t directly manipulate native DOM elements like you would on a regular static website. Here are two reliable solutions:

Solution 1: Custom HTML Component (Quick Style Override) #

Wix lets you embed custom HTML via an iframe, which bypasses the DOM sandbox restrictions. This is great if you want to keep using the native audio player but hide extra controls:

1. In your Wix editor, go to Add > Embed > HTML iframe to add a custom HTML component to your page.
2. Double-click the component to open the HTML editor, then paste this code:

<style>
  /* Center the play/pause button */
  audio::-webkit-media-controls-panel {
    display: flex;
    justify-content: center;
    background: transparent; /* Optional: match your site's style */
  }
  /* Keep only the play/pause button visible */
  audio::-webkit-media-controls-play-button {
    display: block;
    /* Optional: style the button to fit your site */
    padding: 8px;
    border-radius: 50%;
  }
  /* Hide all other default controls */
  audio::-webkit-media-controls-volume-slider,
  audio::-webkit-media-controls-mute-button,
  audio::-webkit-media-controls-timeline,
  audio::-webkit-media-controls-current-time-display,
  audio::-webkit-media-controls-time-remaining-display,
  audio::-webkit-media-controls-fullscreen-button {
    display: none !important;
  }
</style>
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" controls volume="1.0"></audio>

3. Adjust the CSS styles (like background color or button size) to match your website’s design.

Note: This uses WebKit prefixes (works for Chrome/Safari, which Wix’s iframe supports). For Firefox compatibility, you’d need additional vendor prefixes, but most Wix visitors use WebKit-based browsers.

Solution 2: Velo (Wix Code) Custom Player (Full Control) #

If you want complete control over the player’s appearance and behavior, use Wix’s official Velo audio API. This avoids relying on native controls entirely:

1. Add a button to your page (name it #playPauseButton in the Properties panel) and set its initial label to "Play".
2. Click the Code icon on the left sidebar to open the page code editor, then paste this code:

import wixAudio from 'wix-audio';

let audioPlayer;
let isPlaying = false;

$w.onReady(async function () {
  // Initialize the audio player with your stream URL
  audioPlayer = await wixAudio.createAudioPlayer({
    src: "http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925",
    volume: 1.0
  });

  // Handle play/pause button clicks
  $w("#playPauseButton").onClick(async () => {
    if (isPlaying) {
      await audioPlayer.pause();
      $w("#playPauseButton").label = "Play";
    } else {
      await audioPlayer.play();
      $w("#playPauseButton").label = "Pause";
    }
    isPlaying = !isPlaying;
  });
});

3. Customize the button’s style (colors, size, icons) using the Wix editor’s design tools to match your site.

Why Your Previous Code Didn’t Work #

Wix’s page code sandbox prevents direct access to native DOM elements (like your <audio> tag). Any code that tries to select or modify DOM elements directly will fail—you have to use either the custom HTML iframe or Wix’s official Velo APIs to interact with media elements.

Quick Note on Mixed Content #

If your Wix site uses HTTPS (most do), loading an HTTP audio stream will trigger a mixed-content warning in browsers. To fix this, try to find an HTTPS version of your audio stream URL.

内容的提问来源于stack exchange，提问作者timusR