$w("#audioPlayer") not working

$w(“#audioPlayer”) in a repeater, loads mp3’s urls (e.g. https://static.wixstatic.com/mp3/ec1f12xxxxxxxx.mp3) from a dataset.
Used to work fine for 2 months. Suddenly has stopped working.

On Chrome :
The Console tab gives ERROR : Uncaught (in promise) DOMException
The Sources tab gives this :

Any ideas appreciated.

Read Wix Support pages about it.
The new autoplay policy for certain browsers only allows video to autoplay when the sound is muted.
https://support.wix.com/en/article/autoplay-on-desktops-and-laptops

It is a Google Chrome issue, it has been talked about previously.

In modern versions of Chrome, you can’t have videos autoplay with sound enabled by default.
You need to add the muted property to your HTML5

muted="muted"

https://developpaper.com/hack-played-automatically-by-audio-in-chrome-browser/

As mentioned, I use the $w(“#audioPlayer”) element not the html5 (also I do not use autoplay).
Any other ideas ?

Yes, however it is still affected. As it is only Google Chrome doing it, it is a Google Chrome issue and not Wix.

If you had read your links provided.
https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

Did you just stumble upon this unexpected media error in the Chrome DevTools JavaScript Console?
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
or
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

Example: Play & Pause

<video id="video" preload="none" src="https://example.com/file.mp4"></video>
 
<script>
  // Show loading animation.
  var playPromise = video.play();
 
  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      video.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

NO it is not just Chrome. Tested on Internet and Firefox - no work at all.
So the $w(“#audioPlayer”) element is not working.

However, there is nothing you can do to change the Chrome settings of the actual user, so please paste your code for the actual page here.

Just to clarify, you are using just the Wix Audioplayer API and not the Wix Audio Player app tool?
https://support.wix.com/en/wix-audio/wix-audio-player

https://www.wix.com/corvid/reference/$w.AudioPlayer.html
https://www.wix.com/corvid/reference/$w.Repeater.html

It might just be a simple case of adding something like.

if( $w("#myAudioPlayer").isPlaying ) {
  $w("#myAudioPlayer").pause();
}
else {
  $w("#myAudioPlayer").play();
}

Or simply get the audioplayer to mute.

$w("#myAudioPlayer").mute();

@givemeawhisky
I already tried the $w(“#myAudioPlayer”).mute(); with no luck.
(Of course we’are talking about the Wix Audioplayer API. )

As mentioned above, the $w(" #audioPlayer ") connected to a dataset with mp3 files urls, (in or out a repeater) does not work.

Have a read of this page as it provides a solution.
https://www.wix.com/corvid/forum/community-discussion/playing-audio-dynamically-solved

The Wix AudioPlayer API was only introduced at the end of August, so there shouldn’t be an issue with it already.

With regards to the MP3 URL, how are they actually listed in your code for it?
https://www.wix.com/corvid/reference/$w.AudioPlayer.html#src
The URL formats supported are:

  • Media Manager: wix:audio://v1/<audio_uri>/#duration=

  • Web URL: (http(s)|blob|data)://site.com/audio-file.mp3

Also, as you are using a repeater are all your scopes set up correctly for it with onEachItem and onItemReady etc.
https://www.wix.com/corvid/reference/$w.Repeater.html

What plan are you on with Wix, as it could just a simple issue of your storage is nearly used up, thinking outside the box here.

The repeatet gets its content from a dataset - no code here.
The plan is business 20 gb no storage needed.

Well, the audioplayer api may be a newbie element, but times are changiing as Dylan said (and todays are changing fast also).

Have you got any code on your page that actually uses the Wix AudioPlayer API?

If you have any code on your page, please post it up here.

Aug 28, 2019
Wix Editor Elements ($w): Audio Player API
With the Audio Player API you can customize your Wix Audio Player . Now you can control your audio tracks programatically, customize your display, and add events as site visitors navigate your tracks

Here is a simple page of the site. https://www.musicbooknet.com/bach-for-guitar-music-scores

and here is the code on this page:

$w.onReady(function () {
});
export function repeater1_itemReady($item, itemData, index) {
	 $w("#slider2").onChange((event) => {
   $item = $w.at(event.context);
    $item("#audioPlayer2").volume=event.target.value
   })
}

The audioplayer in the repatear1 gets its mp3 url from the dataset. If i moved the audioplayer out of the repeater and set the volume etc programatically, again does nothing (so it seems the repeater is not the problem).

Okay can you show me a pic of your repeater layout, I need to see what the part under the music sheet image is like.

To me it looks like you have actually got the Wix Audio Player app set up in the condensed setting
and you have nothing happening on your page or in your code when the user clicks on the play button.

You might just be easier adding the Wix Audio Player as shown here and connecting that to your dataset.
https://support.wix.com/en/article/about-the-wix-audio-player

Nope. It worked for 2 months. It should load the mp3 as all other items ar loaded from the datset.
The audioplayer does not load the mp3.

Also, these two lines shown at the bottom of this post…

The first one, what are you actually trying to do, something like this…
When each item is ready, the value of a text element is set to a value found in that specific item’s data.

$w("#myRepeater").onItemReady( ($item, itemData, index) => {
   $item("#myRepeatedText").text = itemData.textField;
 } );

As the second line is another function with the event handler just written into the code so you do not need to use the onChange event handler from the properties panel for that element.

export function repeater1_itemReady($item, itemData, index) {
	 $w("#slider2").onChange((event) => {

Yes, the slider onChange function is for the volume.

However, what have you got in your code that plays the MP3 when the user clicks on the play arrow icon.

If you have not used the Wix Audio Player, then you should have an onClick function so that when the user clicks on the arrow it starts to play the file.

$w("#playbutton").onClick((event) => {
$w("#myAudioPlayer").play();
}

//or//

export function playButton_click(event) {
$w("#myAudioPlayer").play(); 
}

Nope. Ther is no playButton. There is the $w(audioplayer) element with the events listed in the API. It loads the infos from the dataset. As you may see, it loads everything image, text,) except the audio file!

So, it seems there is a serious problem/conflict with $w(audioplayer).
Well, thank you for your efforts, but we have to eat something :slight_smile:

Okay so looking at your site, you have actually used the Wix Audio Player as the play button.

So note that this audioPlayer here is the Wix app and not the audioPlayer api.

If you have used this then can you simply try disconnecting the data connection and just on the first one add the external music url to the settings and see if that works.

You need to post an image of the elements in that play button area so I need to know what you are working with on your page.

How can you have no play button when there is one on the page that needs to be connected to the music file so that when the user clicks on it, then it knows where to play the file from?

If there was a major conflict, it would have already been picked up and reported.

Hey, hi again. The wix audioplayer is supported by API as you may see here https://www.wix.com/corvid/reference/$w.AudioPlayer.html
You do need a playbutton, just need to load from the dataset the url.

Now, when I add the audioplayer on the page and connect to an mp3 file directly from the library (not the dataset) it loads and plays.
When it is in the repeater and connected to the dataset it does not load (while it used to load and play) and while other repeater items (images, text) are loaded ok.

To make it even simpler, when audioplayer is connected to a dataset (in or out a repeater) it does not load the mp3 url.
When it’s connected to the same url directly, it loads and plays.