The examples below represent the same synchronized narration presentation. One is XML; the other JSON.


<syncNarration>
    <assets>
        <asset id="chapter" src="file.html" mediaType="text/html">
            <property name="cssClass" value="highlight"/>
        </asset>
        <asset id="narration" src="audio.mp3" mediaType="audio/mpeg"/>
    </assets>
    <sequence>
        <step>
            <media assetRef="chapter" selector="#p1"/>
            <media assetRef="narration" selector="#t=0,10"/>
        </step>
        <step>
            <media assetRef="chapter" selector="#p2"/>
            <media assetRef="narration" selector="#t=10,20"/>
        </step>
        <step role="sidebar">
            <!-- nested highlights -->
            <media assetRef="chapter" selector="#sidebar"/>
            <sequence>
                <step>
                    <media assetRef="chapter" selector="#sidebar-p1">
                        <property name="cssClass" value="outline highlight"/>
                    </media>
                    <media assetRef="narration" selector="#t=20,30"/>
                </step>
                <step>
                    <media assetRef="chapter" selector="#sidebar-p2"/>
                    <media assetRef="narration" selector="#t=30,40"/>
                </step>
            </sequence>
        </step>
    </sequence>
</syncNarration>


{
    "assets": [
        {
            "id": "chapter",
            "src": "file.html",
            "mediaType": "text/html",
            "properties": {
                "cssClass": "highlight"
            }
        },
        {
            "id": "narration", 
            "src": "audio.mp3",
            "mediaType": "audio/mpeg"
        }
    ],
    "sequence": {
        "steps": [
            {
                "media": [
                    {
                        "assetRef": "chapter",
                        "selector": "#p1"
                    },
                    {
                        "assetRef": "narration",
                        "selector": "#t=0,10"
                    }
                ]
            },
            {
                "media": [
                    {
                        "assetRef": "chapter",
                        "selector": "#p2"
                    },
                    {
                        "assetRef": "narration",
                        "selector": "#t=10,20"
                    }
                ]
            },
            {
                "role": "sidebar",
                "media": [
                    {
                        "assetRef": "chapter",
                        "selector": "#sidebar"
                    },
                    {
                        "sequence": {
                            "steps": [
                                {
                                    "media": [
                                        {
                                            "assetRef": "chapter",
                                            "selector": "#sidebar-p1",
                                            "properties": {
                                                "cssClass": ["outline", "highlight"]
                                            }
                                        },
                                        {
                                            "assetRef": "narration",
                                            "selector": "#t=20,30"
                                        }
                                    ]
                                },
                                {
                                    "media": [
                                        {
                                            "assetRef": "chapter",
                                            "selector": "#sidebar-p2"
                                        },
                                        {
                                            "assetRef": "narration",
                                            "selector": "#t=30,40"
                                        }
                                    ]
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    }
}

SMIL-like version


<smil>
    <assets>
        <asset id="chapter" src="file.html" mediaType="text/html">
            <param name="cssClass" value="highlight"/>
        </asset>
        <asset id="narration" src="audio.mp3" mediaType="audio/mpeg"/>
    </assets>
    <seq>
        <par>
            <ref assetRef="chapter" selector="#p1"/>
            <ref assetRef="narration" selector="#t=0,10"/>
        </par>
        <par>
            <ref assetRef="chapter" selector="#p2"/>
            <ref assetRef="narration" selector="#t=10,20"/>
        </par>
        <par role="sidebar">
            <!-- nested highlights -->
            <ref assetRef="chapter" selector="#sidebar"/>
            <seq>
                <par>
                    <ref assetRef="chapter" selector="#sidebar-p1">
                        <param name="cssClass" value="outline highlight"/>
                    </ref>
                    <ref assetRef="narration" selector="#t=20,30"/>
                </par>
                <par>
                    <ref assetRef="chapter" selector="#sidebar-p2"/>
                    <ref assetRef="narration" selector="#t=30,40"/>
                </par>
            </seq>
        </par>
    </seq>
</smil>