I have a code to highlight the sentence when I click it but I need to add one more thing also to be able to highlight a "span" without clicking it just when the reading continues from span to span for using sound mp3 purpose
let sentence = $('.sentence').text();
sentences = sentence.split('.')
$('.sentence').html('');
for (let s of sentences) {
$('.sentence').append('<span>' + s + '.</span>')
}
$('.sentence span').on('click', function() {
$(this).addClass('highlight').siblings().removeClass('highlight');
});
.sentence span:hover,
.highlight {
background: Yellow;
}
window.smoothScroll = function (target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function (c, a, b, i) {
i++;
if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function () {
scroll(c, a, b, i);
}, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="sentence">
(1)Lorem ipsum dolor sit amet consectetur adipiscing elit.
(2)Pellentesque iaculis.
(3)Pellentesque iaculis nisl at erat dapibus cursus.
(4)Pellentesque iaculis.
(5)amet consectetur adipiscing elit.
(6)adipiscing elit.
</p>