Scroll text with audio

by akmiecik

HTML

<article class="post-11001 page type-page status-publish ast-article-single" id="post-11001" itemtype="https://schema.org/CreativeWork" itemscope="itemscope">
<audio class="wp-audio-shortcode" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="https://www.regnumchristi.com/en/wp-content/uploads/2024-01-13_mixdown.mp3?_=1"><a href="https://www.regnumchristi.com/en/wp-content/uploads/2024-01-13_mixdown.mp3">https://www.regnumchristi.com/en/wp-content/uploads/2024-01-13_mixdown.mp3</a></audio>
	
	<header class="entry-header ">
		<h1 class="entry-title" itemprop="headline">Regnum Christi</h1>	</header> <!-- .entry-header -->


<div class="entry-content clear" itemprop="text">

	
	<p></p><h4 class="elementor-post__title"> <a href="https://www.regnumchristi.com/en/january-13-2024-discipleship/"> January 13, 2024  - Saturday of the First Week in Ordinary Time<br><br> Discipleship </a></h4> <h2 style="display: none;">Saturday of the First Week in Ordinary Time</h2><p>Mark 2:13-17</p><p>Jesus went out along the sea. All the crowd came to him and he taught them. As he passed by, he saw Levi, son of Alphaeus, sitting at the customs post. Jesus said to him, “Follow me.” And he got up and followed Jesus. While he was at table in his house, many tax collectors and sinners sat with Jesus and his disciples; for there were many who followed him. Some scribes who were Pharisees saw that Jesus was eating with sinners and tax collectors and said to his disciples, “Why does he eat with tax collectors and sinners?”&nbsp;Jesus heard this and said to them, “Those who are well do not need a physician, but the sick do. I did not come to call the righteous but sinners.”</p><p><strong>Introductory Prayer:</strong> God our Father, in your eyes I am like a little child whom you tenderly watch over. God the Son, in your eyes I am like a poor, helpless sheep whom you gently pick up and carry when I’m worn out from my sins. God the Holy Spirit, in your eyes I...

CSS

article {
    max-height: 650px;
    overflow-y: auto !important;
	  padding-right: 25px;
}

JavaScript

jQuery(document).ready(function($) {
$(document).ready(function() {
  // Get the audio element
  var audioElement = document.getElementsByTagName('audio')[0];
  
  // When the audio has loaded, get its duration
  audioElement.addEventListener('loadedmetadata', function() {
    // Get the duration in seconds
    var audioDuration = audioElement.duration;
    
    // Calculate the scrolling duration based on the audio duration
    var scrollDuration = audioDuration * 1000;
    
    // Set the scroll duration for the article
    $('article').animate({ scrollTop: $('article')[0].scrollHeight }, scrollDuration);
  });
});
});