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>
<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>