How can I add an audio player to a product page?

Ask the community
,
1

When editing a product’s details in Editor X, I couldn’t seem to find a feature that can add a mini audio player to the product description. I’m aware that they can be added in the main editor but that makes the audio players the same on every product page whereas I want unique ones for each product. Would love to know if there is a way to achieve this. Thanks!

1 Like
2

Hey @sampletoybox , I’m Jonathan from the Editor X team.
To connect a dynamic audio player for each product page you’ll need to use a little bit of code.
Here’s the code snippet, and a a quick video tutorial.

import wixData from 'wix-data';

$w.onReady(function () {
 let AudioPlayer = $w('#audioPlayer1');
    $w('#productPage1').getProduct()
        .then((product) => {
 let productId = product._id;
            wixData.query("Audio")
                .eq("newField", productId)
                .find()
                .then((results) => {
                    AudioPlayer.src = results.items[0].audio;
                    AudioPlayer.artistName = results.items[0].longDescription;
                    AudioPlayer.trackName = results.items[0].title;
                });
        })
});
3

Hey thank you so much for taking the time to do this. I managed to get it working with a little time. Cheers Jonathan!

4

Good Day, Thank you for this code. Quick question ! on my end the player is only playing the same song on each product page instead in separate song for each product page. Is it possible to adjust this? thanks

1 Like
5

How might this code change if we wanted to use an external video from YouTube instead of an uploaded audio file?

6

Hi Jonathan Tsodikovitch, I’ve been trying to get this to work but with no luck. Can you help? Thanks Neil Campsie

7

It’s not working for me.

Im getting a Error: “Error: Cannot read properties of undefined (reading ‘audio’)”

image
image775×348 14.1 KB

image

image
image1209×441 36.7 KB

About the url (all) and other url tabs, I had them before and is still giving me the same issue

9

verify if the field ID in Velo code matches the field ID used in the associated cms.

there might be a problem with the line .eq("newField", productId)

10

basically it’s I need a different component in the editor a video player. and you need to retrieve the URL from the cms collection

let videoSrc = $w("#myVideoPlayer").src;

1 Like
11

yeap! that did the trick! thanks for noticing this small change! you are awesomee!