How to set up a Dynamic Audio Player in Blog with code

Ask the community
, ,
1

Hi,

I want to put audio on my blog posts. The audio is basically the text but in audio form. So each blog post has it’s own audio file. I have all the audio files uploaded to the site files. Is there a way to put an audio player to pull up the audio that belongs to that blog post? How can I set this up automatically with code?

I found a way to manually do this. I would put an HTML element on the text of the blog post and on the code of the HTML I would put the link to the audio (found on the site files). Like this:

1280×800 97.8 KB

The code for the HTML is as follows:

<audio controls>
<source
src="https://static.wixstatic.com/mp3/544eeb_57382b3facee4168be03070c1ce5134a.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

But I would like to have this process automatic, perhaps using a database, that would identify the title or some information from the blog post and match it with the audio file and play that audio file. So I would put an audio player on the Blog Post page (which would now appear on all the blog post pages) but now I need to code it to play the right audio.

1280×800 140 KB

How can I code this audio player to play the audio that relates to the blog post that is being viewed?

Thanks for the help.

2

UPDATE

I set up two datasets in order to pull up the correct audio for the blog post.

The first dataset is set to the Posts collection and displaying 1 item:

1280×800 136 KB

The second dataset is set to my Audios collection. I exported the Posts collection (only the title, category, publicationDate and url columns) and imported it to a new collection which is called Audios and then I could insert a new column with the audio file of each post. This second dataset is set to filter by the first dataset, so that the Audio dataset will only show the item that is displayed on the Post dataset:

1280×800 147 KB

Now to complete the cycle I would need to filter the Post dataset to filter by the current blog post that is showing on the screen. I did some trial codes, but they didn’t work. Any suggestions???

#post1 being the item on the page that displays the blog post.

import wixData from 'wix-data';

$w.onReady(function () {

    $w("#postsDataset").onReady( () => {
        $w('#post1').getPost()
            .then( (post) => {
                 let postTitle = post.title;
                 let postUrl = post.postPageUrl;
    
             } )
            .catch( (error) => {
              console.log(error);
            } );

        $w("#postsDataset").setFilter(wixData.filter().eq("postTitle"));
});

Another trial:

$w.onReady(function () {

    $w("#postsDataset").onReady( () => {
        let toFilterBy = $w('#post1').getPost().post.title;
        $w("#postsDataset").setFilter(wixData.filter().eq("toFilterBy"));
});

Can anyone help me to get this to work? Thank you.

3

UPDATE 2

Got it to work!!

I used this code:

import wixData from 'wix-data';

$w.onReady(function () {

$w('#post1').getPost()
  .then( (post) => {
    let postTitle = post.title;
    $w("#postsDataset").onReady(() => {
    $w("#postsDataset").setFilter(wixData.filter()
    .contains("title",postTitle));
  });
  } )
  .catch( (error) => {
    console.log(error);
  } );
           
});