RTCDTMFSender: tonechange event

{{APIRef("WebRTC")}}

The tonechange event is sent to an {{domxref("RTCDTMFSender")}} by the WebRTC API to indicate when {{Glossary("DTMF")}} tones previously queued for sending (by calling {{domxref("RTCDTMFSender.insertDTMF()")}}) begin and end.

To determine what tone started playing, or if a tone stopped playing, check the value of the event's {{domxref("RTCDTMFToneChangeEvent.tone", "tone")}} property.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

addEventListener("tonechange", (event) => { })

ontonechange = (event) => { }

Event type

An {{domxref("RTCDTMFToneChangeEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("RTCDTMFToneChangeEvent")}}

Event properties

In addition to the properties of {{domxref("Event")}}, this interface offers the following:

• {{domxref("RTCDTMFToneChangeEvent.tone")}} {{ReadOnlyInline}}
  • : A string specifying the tone which has begun playing, or an empty string ("") if the previous tone has finished playing.

Examples

This example establishes a handler for the tonechange event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".

This can be done using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:

dtmfSender.addEventListener("tonechange", (ev) => {
  let tone = ev.tone;
  if (tone === "") {
    tone = "<none>";
  }

  document.getElementById("playingTone").innerText = tone;
});

You can also just set the ontonechange event handler property directly:

dtmfSender.ontonechange = (ev) => {
  let tone = ev.tone;
  if (tone === "") {
    tone = "<none>";
  }

  document.getElementById("playingTone").innerText = tone;
};

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}