Syncing an Audio Clip with Text captions

Below analysis and code sample is posted as an answer to this question posted on Facebook groups.

If you go to the page http://quizresults.manifestationmiracle.net/?name=Hasan&q=aabbabc and enable its ‘view source’, you should see they are loading few javascript libraries. jquery, and jquery-ui should be familiar to most of you. They also load a jquery plugin called jplayer which is to be used for audio playback. And also there is a custom script named ‘numerologyslideshow.js’.This script is in the obfuscated form so its not possible to interpret whats going on in that. But when checking I could see it has a function called NumerologySlideshow() that handles the functionality of rotating the messages in the slide show in parallel to which part of the sound clip that plays at a given moment.

When the page is fully loaded it calls the NumerologySlideshow() function with two parameters:

<script>
	$(function(){
		$show = NumerologySlideshow('#sound', 'http://localhost/audiocaptionslideshow/data/slideshow.json');
	})
</script>
  1. First parameter is the ID of the HTML element that is to be used as the audio player. If you look at the source code you should see there is a div element with the ID of ‘sound’
  2. The second parameter is the URL to the JSON datasource that contains slide show contents

Here is an extract of the JSON datasource located at data/slideshow.json:

	{
		'audio': 'http:\/localhost\/slideshow\/data\/sound.mp3';
		'playtime': 218.544,
		'slides': [
    			{
      				"clear": true,

      				"items": [
        			 		{
          						"type": "centered",
          						"html": "<p class=\"centered\">Congratulations for completing our short quiz,<\/p>",
          						"style": [
            
          						]
        					}
      					],

      				"time": 2.318,

      				"css": [
        
      				]
    			},

    			{
      				"clear": true,
      				"items": [
        					{
          						"type": "centered",
          						"html": "<p class=\"centered\">designed to show you exactly what is energetically holding you back<\/p>",
          						"style": [
            
          						]
        					}
      					],
      				"time": 3.5,
      				"css": [
        
      				]
    			}
			
		]

	}

This JSON file holds all the text contents that appear in the slideshow you see. Let me give you a brief walk through on the specific keys that they’ve used:

  • ‘audio’ key sets the URL path to the sound clip that will be played
  • ‘playtime’ key defines the total number of seconds the sound clip gonna play
  • ‘slides’ key defines an array of objects:
    	'slides': [
    		{
    			object
    		},
    		{
    			object
    		},
    		...
    	]
    

    Each object represents an individual slide. Below extract shows how a slide object is constructed:

    		{
    			'clear': true,
    			'items': [
    				{
    					'type': 'centered',
    					'html': '<p class=\'centered\'>Congratulations for completing our short quiz,<\/p>',
    					'style': [
    
    					]
    				}
    			],
    			'time': 2.318,
    			'css':[
    
    			]
    		}
    

    • The ‘html’ key sets the text that should be shown in the slide.
    • The ‘time’ key sets the amount of time a particular slide should be visible before moving on to the next slide. In the first slide it is set to 2.318 seconds. That time is roughly equivalent to the time it takes to complete the first phrase of the audio clip that plays in the background. So each slide is assigned a time frame that is equivalent to the time it takes to complete the relevant phrase in the sound clip. That’s how it works.

Additionally, if you are wondering how your name is showing in the slides, that was actually done when the slideshow.json was generated based on your answers.

I was able to replicate this functionality in my local development environment. Here I have included that source code so you can download it and set up in your machine to see how it is build.

Click Here to download the source code

Comments

So empty here ... leave a comment!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sidebar



Do NOT follow this link or you will be banned from the site!