Developer embeds

Embed voice notes where the lesson already lives.

Use the TAC web component for rich playback, or fall back to an iframe or plain link when your LMS blocks scripts.

Start with the web component See fallbacks

Assignment feedback 0:42

Students listen without leaving the page

Quickstart

Choose the embed your platform allows.

The JavaScript web component is the best experience when you control the page. Links and iframes keep the same voice note usable in locked-down LMS editors.

Option A

JS web component

Add the loader once per page, then render a <tac-player> wherever feedback belongs.

<script async src="https://talkandcomment.com/embed/player.v1.js"></script>

<tac-player
  src="https://cdn2.talkandcomment.com/uploads/abc123.m4a"
  data-track-id="abc123"
  data-player-url="https://talkandcomment.com/p/abc123"
></tac-player>

Option B

Iframe or plain link

Use this path when the editor strips scripts, CSP blocks third-party loaders, or IT wants the lowest-risk pilot.

<a href="https://talkandcomment.com/p/abc123">
  Listen to my voice note
</a>

<iframe
  src="https://talkandcomment.com/p/abc123"
  title="TAC voice note"
  width="100%"
  height="220"
  loading="lazy"
></iframe>

Where it fits

Use voice when the context matters.

Writing feedback

Place a short voice note beside the rubric or next draft checklist.

Weekly module intros

Add a 60-second orientation at the top of Canvas, Schoology, or Moodle pages.

Directions students follow

Pair a multi-step task with a spoken walkthrough.

Rubric anchors

Show what Proficient vs Advanced sounds like before students submit.

Parent pages

Explain project expectations in a clearer, more human tone.

Team resources

Document grading norms, common misconceptions, or PLC notes in context.

Help articles

Add audio explanations to workflows that are easier heard than skimmed.

Creator pages

Preview a lesson, episode, or resource with a short spoken highlight.

Intervention support

Keep observational notes near the learning artifact when policy allows.

Attributes

Required and optional fields

src is required and points to the audio file.
data-track-id enables track-specific actions when available.
data-player-url opens the TAC player page for the same note.
data-library-url can send owners back to their TAC library.
data-owner can enable owner-only actions such as transcription requests.

IT allowlist

Headers and domains to check

script-src allows https://talkandcomment.com.
connect-src allows https://talkandcomment.com and https://cdn2.talkandcomment.com.
media-src allows https://cdn2.talkandcomment.com or your audio host.
frame-src allows https://talkandcomment.com when using iframe fallback.
Access-Control-Allow-Origin enables real waveform analysis for direct audio files.

Troubleshooting

FAQ

The player does not show up.

Most often, the editor stripped the script tag or CSP blocked the loader. Use the plain link first, then try iframe if the platform allows it.

The waveform looks synthetic.

Playback can still work without CORS headers. Real waveform analysis needs the audio file to allow the embedding origin, often with Access-Control-Allow-Origin: *.

Can the player autoplay?

Most browsers block autoplay with sound. Design the page around a deliberate click or tap.

The iframe is clipped.

Check fixed-height containers and parent elements with overflow: hidden. Increase iframe height until scrollbars disappear.

Need the implementation note?

The repo docs include the same quickstart, attribute list, CSP guidance, and debugging checklist in Markdown form.

Open the docs Ask about embeds