[Resolved] playing audio file on image click

[Author]

Posts

[mohammedA-15]

I have a custom post type named lesson for example,
It has only two custom fields and no other fields
one of them is an image
the other is an audio file
and have set up a single view for this CPT
The question here is that I want to hide the audio file for example and make it playable on image click
hidden link
I want to make this as automated as possible
How to link those fields to do the thing by default

I found this Js code,
document.getElementById('yourButtonID').onclick = function() {
document.getElementById('audioPlayer').play();
}

[mohammedA-15]

Here is an illustration

[Luo Yang]

Hello,

I have checked the URL you mentioned above, there isn't HTML IDs attribute in both image and audio element.

I suggest you try these:
1) Add a Toolset Container block with CSS class name "audio-player", see my screenshot audio-player.JPG
Move both the image and audio field into above Container block
More help:
https://toolset.com/block-item/container/

2) In the content template, setup the custom JS codes as below:

jQuery('div.audio-player img').click(function() {
	jQuery('div.audio-player audio').trigger("play");
});

[mohammedA-15]

Thanks for your reply, I tried your code and other Js code on single templates it works just fine.
but then I tried to find a way to limit the next and previous buttons within the category but can't find any way
as I said I'm making lessons and I want to group each category of lessons along with next and previous buttons
but the single template display just all lessons and don't care for categories
So I tried to create separate pages with toolset views block to only display one category in each page with its own next and previous buttons and used the provided code, and it works only if ajax is not enabled, I was wondering if there is a way that can make it work when I enable Ajax pagination in the view?
or to make the single template view next or previous links for one category?

Thanks

[Luo Yang]

I assume you are using AJAX pagination, if it is, you can modify the JS codes as below:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  jQuery('div.audio-player img').click(function() {
      jQuery('div.audio-player audio').trigger("play");
  });
});

[mohammedA-15]

Hello, I'm afraid that this solution doesn't work if I made a web-view application of my website
the sound won't play at all in the application
maybe it's because Jquery is not supported
Can you provide a similar solution using JS