Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Mar 13

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

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 answer1 reply
3
Best Answer
Mar 17

Hey @SPTB, 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;
                });
        })
});


Mar 30

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

Editor X

Design your boldest creations.