Implementation Options

Original SSML

You say, pecan. I say, pecan.

Markup:

    

The JSON AST (just the phonemes) as HTML

[
  {
    "type": "element",
    "tagName": "phoneme",
    "attributes": [
      {
        "key": "alphabet",
        "value": "ipa"
      },
      {
        "key": "ph",
        "value": "pɪˈkɑːn"
      }
    ],
    "children": [
      {
        "type": "text",
        "content": "pecan"
      }
    ]
  },
  {
    "type": "element",
    "tagName": "phoneme",
    "attributes": [
      {
        "key": "alphabet",
        "value": "ipa"
      },
      {
        "key": "ph",
        "value": "ˈpi.kæn"
      }
    ],
    "children": [
      {
        "type": "text",
        "content": "pecan"
      }
    ]
  }
]
    

ARIA

I say pecan. You say pecan.

Markup:

    
How it's parsed:
JSON.parse(element.getAttribute('aria-ssml'))

Ruby + Microdata

You say, pecan pɪˈkɑːn . I say, pe ˈpi can kæn .

Markup:

    

Ruby + Microdata extracted/parsed to JSON

How it's parsed:
    

aria-details

You say, pecan. I say, pecan.

Markup:

    
How it's parsed:
document.getElementById(element.getAttribute('aria-details'))

HTML + Microdata

You say, pecan. I say, pecan.

Markup:

    

HTML + Microdata extracted/parsed to JSON

How it's parsed:
    

Another example, using itemref.

How it's parsed:

JSON-LD + Microdata

You say, pecan. I say, pecan.

Markup:

    
How it's parsed:
    

HTML with external namespace SSML (similar to MathML)

You say, pecan. I say, pecan.

Markup:

    

(microdata parsing done by microdata-node or Google's Structured Data Testing Tool)

You say, pecan. I say, pecan.