Пока нашел следующее решение, но если кто то знает более лучший способ, буду рад, если вы поделитесь! 

Создаем замещающую схему CallPageV2 и добавляем туда в diff:

{
    "operation": "insert",
    "parentName": "GeneralInfoTabGroup74451b35",
    "name": "AudioPlayer",
    "propertyName": "items",
    "values": {
        "itemType": Terrasoft.ViewItemType.CONTAINER,
        "generator": function() {
            return {
                "selectors": {
                    "wrapEl": "#AudioPlayer",
                    "iframeEl": "id_AudioPlayer"
                },
                "className": "Terrasoft.HtmlControl",
                "html": "<audio style=\"display:none;\" controls=\"controls\"><source " +
                "src=\"\" type=\"audio/ogg\" /></audio>"
            };
        },
        "layout": {
            "colSpan": 12,
            "rowSpan": 1,
            "column": 0,
            "row": 0
        }
    }
}

(parentName замените на свой)

И в методы:

"generateAudioPlayer": function(audioUrl) {
    if (audioUrl.length >= 12) {
        var audioSource = document.querySelector("Source");
        if (audioSource) {
            audioSource.src = audioUrl;
            var audioBlock = document.querySelector("audio");
            audioBlock.style = "style=\"display:hidden;\"";
        }
    }
}

Далее вызываем новый метод из инициализации карточки, передавая ему ссылку на наше аудио: 

"onEntityInitialized": function() {
    this.callParent(arguments);
 
    var callAudioUrl = this.get("UsrAudio");
    this.generateAudioPlayer(callAudioUrl);
}

Добрый день, в вашем случае вы напрямую используете тэг audio из HTML. Также рекомендую вам посмотреть в сторону использования компонента Terrasoft.AudioPlayer. Пример использования можно увидеть в схеме CallSectionV2:

{
   "operation": "insert",
   "name": "AudioPlayer",
   "parentName": "DataGrid",
   "propertyName": "activeRowActions",
   "index": 1,
   "values": {
      "className": "Terrasoft.AudioPlayer",
      "selectors": {"wrapEl": "#AudioPlayer"},
      "sourceId": {"bindTo": "getSourceId"},
      "sourceUrl": {"bindTo": "SourceUrl"},
      "playbackended": {"bindTo": "onPlaybackEnded"},
      "error": {"bindTo": "onPlayError"}
   }
},

Также часть логики расположена в схеме CallSectionGridRowViewModel.

Здравствуйте.
Возможность прослушивать записи звонков зависит от используемой интеграции. Поддерживается в Oktell и Webitel. Плеер там уже присутствует. Подробнее описано здесь: https://academy.terrasoft.ru/documents/sales-team/7-9/zapis-i-proslushi…

Попробуйте:

var element = document.createElement("audio");
element.addEventListener("click", function(e) { e.stopPropagation(); }, false);
element.autoplay = true;
element.controls = true;
element.src = /**сюда url ссылку на сурс(пр.: запись звонка в wav формате)**/;
element.style.marginLeft = "5px";
element.type = "audio/mpeg";
var actionsDiv = Ext.get("AudioContainer").dom;
var lastChild = actionsDiv.children[actionsDiv.childElementCount - 1];
if (lastChild) {
	actionsDiv.removeChild(lastChild);
}
actionsDiv.appendChild(element);

контейнер для элемента

{
	"name": "AudioContainer",
	"operation": "insert",
	"parentName": "Detail",
	"propertyName": "tools",
	"index": 2,
	"values": {
		"id": "AudioContainer",
		"items": [],
		"itemType": Terrasoft.ViewItemType.CONTAINER
	}
}

"Варфоломеев Данила" написал:

Попробуйте:

var element = document.createElement("audio");

element.addEventListener("click", function(e) { e.stopPropagation(); }, false);

element.autoplay = true;

element.controls = true;

element.src = /**сюда url ссылку на сурс(пр.: запись звонка в wav формате)**/;

element.style.marginLeft = "5px";

element.type = "audio/mpeg";

var actionsDiv = Ext.get("AudioContainer").dom;

var lastChild = actionsDiv.children[actionsDiv.childElementCount - 1];

if (lastChild) {

        actionsDiv.removeChild(lastChild);

}

actionsDiv.appendChild(element);

контейнер для элемента

{

        "name": "AudioContainer",

        "operation": "insert",

        "parentName": "Detail",

        "propertyName": "tools",

        "index": 2,

        "values": {

                "id": "AudioContainer",

                "items": [],

                "itemType": Terrasoft.ViewItemType.CONTAINER

        }

}

"Варфоломеев Данила" написал:

Попробуйте:

var element = document.createElement("audio");

element.addEventListener("click", function(e) { e.stopPropagation(); }, false);

element.autoplay = true;

element.controls = true;

element.src = /**сюда url ссылку на сурс(пр.: запись звонка в wav формате)**/;

element.style.marginLeft = "5px";

element.type = "audio/mpeg";

var actionsDiv = Ext.get("AudioContainer").dom;

var lastChild = actionsDiv.children[actionsDiv.childElementCount - 1];

if (lastChild) {

        actionsDiv.removeChild(lastChild);

}

actionsDiv.appendChild(element);

контейнер для элемента

{

        "name": "AudioContainer",

        "operation": "insert",

        "parentName": "Detail",

        "propertyName": "tools",

        "index": 2,

        "values": {

                "id": "AudioContainer",

                "items": [],

                "itemType": Terrasoft.ViewItemType.CONTAINER

        }

}

Как вариант

Подобная функциональность уже есть в OktellCtiProvider и WebitelCtiProvider.
Что нужно сделать:
1. Создать свой cti-провайдер - наследний MsgServiceCtiProvider. Например, AsteriskCtiProvider. Прописать этот провайдер в таблице SysMsgLib для Asterisk;
2. В методе getCapabilities провайдера вернуть для agentCapabilities фичу Terrasoft.AgentFeaturesSet.CAN_GET_CALL_RECORDS;
3. Реализовать метод получения записей звонка по идентификатору в методе queryCallRecords провайдера.

Прослушивание в коробке не все АТС могут - https://academy.terrasoft.ru/documents/sales-enterprise/7-8/sravnenie-v…

Илья, здравствуйте!

Работа с АТС - в процессе, но ей занимаюсь немного не я.. меня интересует именно клиентская реализация проигрывателя.

Условно - есть аудиофайл (не обязательно звонок, для примера), нужно отобразить его в виде проигрывателя, скорее всего через тег

<audio>

Есть контрол AudioPlayer, судя по всему, входящий в пакет CTI Base. Как его подключить на страницу?

Здравствуйте, Денис!

Примеры реализации, которые используются например при интеграции с Oktell есть в пакете CTIBase, в частности схемы AudioPlayer и CallRecordUtilities.

"Мотков Илья" написал:в пакете CTIBase, в частности схемы AudioPlayer

Спасибо, с выводом на страницу разобрались. В итоге сделали на основе той схемы свой контрол, добавляющий соответствующий аудио-элемент.

В объекте страницы (entitySchemaName) по сути есть колонка со строкой-ссылкой на аудиофайл, которая подставляется в нужное место внутрь тега.

Но есть ещё одна задача, возможно, не совсем в рамках вопроса - нужно тот же элемент отобразить на странице с реестром. Возможно где-то были примеры добавления элементов не на страницу, а в список (см. скриншот)?

Денис, в базовой функцитональности мы тоже выводим плеер в реестр. Скриншоты прикрепил. Реализация есть в CallSectionV2 также в пакете CTIBase.

Илья, спасибо, всё добавили.

Добрый день! Можете скинуть пример реализации плеера на странице?

Добрый день, Роман!

Примеры реализации Вы можете посмотреть в конфигурации bpm'online в пакете CTIBase в следующих схемах:
CallSectionV2.js - тут Вам необходимы методы getPlayer: function(), getSourceId: function(), requestCallRecords: function(autoStartPlay)
AudioPlayer.js - схема реализации аудиоплеера
allSectionGridRowViewModel - класс модели представления строки реестра звонков

Мотков Илья,

Здравствуйте, а вы не знаете, есть ли какая то возможность организовать подобное внутри карточки? Пробовал подключать 

AudioPlayer но в ответ получаю лишь 'AudioPlayer' is not defined.

Мотков Илья,

Здравствуйте, подскажите пожалуйста, возможно ли реализовать прослушивание аудио не в разделе, а в карточке звонков? И если да, то как именно. Пробовал подключить 

AudioPlayer, но получаю подобную ошибку "'AudioPlayer' is not defined.", хотя модуль же есть в системе.