Jump to content

Button (or similar) to Consecutively Play All Audio Blocks on a Page?

Recommended Posts

Is there a way to add a button (or something similar) to an audio page that will consecutively play all the audio blocks on the page -  like the old (7.0) Album page?  I do not want to use Soundcloud or pay for a custom audio player.  I'd like to be able to create multiple audio blocks on a page and then add a button that will play all if pressed (similar to the old album page).  I currently have a personal plan which doesn't allow advanced code injection and am hoping there's a way to make this happen without needing to upgrade.

Link to comment
  • Replies 10
  • Views 352
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
On 4/15/2023 at 7:47 PM, tuanphan said:

I guess we can add a button block, then use code to when users click on this button, code will click all all audio on page.

 

Great!  I know how to add a button block.  What code do I need and how do I add that on a my Personal plan site?

Link to comment
18 hours ago, drcomposer said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('div#block-yui_3_17_2_1_1683210725392_10220 a').removeAttr('href');
    $('div#block-yui_3_17_2_1_1683210725392_10220 a').click(function(){
        $('.play-button').click();
    });
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/5/2023 at 2:27 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('div#block-yui_3_17_2_1_1683210725392_10220 a').removeAttr('href');
    $('div#block-yui_3_17_2_1_1683210725392_10220 a').click(function(){
        $('.play-button').click();
    });
});
</script>

 

Thank you so much!  I have a personal site (no code injection access). Can this code be added to a markdown block in my site's footer (I did this with a plug-in from Will Myers)?

Link to comment
13 hours ago, drcomposer said:

Thank you so much!  I have a personal site (no code injection access). Can this code be added to a markdown block in my site's footer (I did this with a plug-in from Will Myers)?

Yes. You can add it to Markdown

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, tuanphan said:

Yes. You can add it to Markdown

Sorry to report it's not working.  Pasted the code after the last line of existing code in the Markdown block on my site's footer (it has code in it from a Will-Myers plug in I purchased), but it's not working.  Also tried pasting code into a new second Markdown block in the footer, but still not working. 

Here's a link to the test page.  Please advise.  Thank you.

https://www.davidreynolds.net/custom-reel-test

Link to comment
On 5/12/2023 at 9:56 PM, drcomposer said:

Sorry to report it's not working.  Pasted the code after the last line of existing code in the Markdown block on my site's footer (it has code in it from a Will-Myers plug in I purchased), but it's not working.  Also tried pasting code into a new second Markdown block in the footer, but still not working. 

Here's a link to the test page.  Please advise.  Thank you.

https://www.davidreynolds.net/custom-reel-test

Maybe I misread your question You mean click button > Play audio 1 >> then when audio 1 end, play 2..... and continue? This is not possible.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.