Добрый день, стоит задача вывести/встроить в карточку Звонка Клиента, аудио плеер для проигрывания аудио записи звонка разговора. На данном этапе в карточке звонка есть поле где указанно ссылка местоположения записи, и если пройти по данной ссылке то начинается автоматическое скачивание аудио фаила на компьютер и далее можно прослушать разговор с клиентом. Формат аудио фаила - *.mp4. Прикрепляю фото карточки звонка, отметил строку с ссылкой.
Запись звонка выполняется сторонним сервисом установленным на мобильном телефоне, на Андроид , который (сервис) интегрирован с bpm online, и далее Сервис (сторонний) после завершения Звонка на мобильном телефоне, генерирует данную ссылку - место хранения аудио фаила (на облачном хранилище), и в итоге передает ее в bpm online.
Есть ли у кого успешный опыт подобной задачи, и показать как это можно реализовать.
Тестируем вариант вывести Аудио плеер по средством HTML в BPM, но пока не получилось, пробовали вот так (может кто подправит или добавит):
{
"operation": "insert",
"parentName": "Header",
"name": "AudioPlayer",
"propertyName": "items",
"values": {
"itemType": Terrasoft.ViewItemType.CONTAINER,
"generator": function() {
return {
"selectors": {
"wrapEl": "#AudioPlayer",
"iframeEl": "id_AudioPlayer"
},
"className": "Terrasoft.HtmlControl",
"html": "
"src=\"\" type=\"audio/mp4\" />"
};
},
"layout": {
"colSpan": 12,
"rowSpan": 1,
"column": 0,
"row": 0
}
}
}
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:block;\"";
}
}
}
onEntityInitialized: function() {
this.callParent(arguments);
var callAudioUrl = ""; //Ссылка на файл звонка
this.generateAudioPlayer(callAudioUrl);
}
Нравится
Можно сделать кнопку. Пример реализации в ContactPageV2:
define("ContactPageV2", [], function() { return { entitySchemaName: "Contact", methods: { onRecordPlayerClick: function() { Ext.getCmp("ContactPageV2AudioPlayerComponent").play(); }, }, diff: /**SCHEMA_DIFF*/[ { "operation": "insert", "name": "PlayRecordButton", "parentName": "GeneralInfoTab", "propertyName": "items", "index": 0, "values": { "itemType": Terrasoft.ViewItemType.COMPONENT, "className": "Terrasoft.Button", "style": Terrasoft.controls.ButtonEnums.style.GREEN, "classes": {"textClass": ["audio-player-button"]}, "caption": "Прослушать", "click": {"bindTo": "onRecordPlayerClick"}, "layout": { "colSpan": 12, "column": 0, "rowSpan": 1, "row": 1 } } }, { "operation": "insert", "name": "AudioPlayer", "parentName": "GeneralInfoTab", "propertyName": "items", "index": 1, "values": { "itemType": Terrasoft.ViewItemType.COMPONENT, "className": "Terrasoft.AudioPlayer", "selectors": {"wrapEl": "#AudioPlayer"}, "sourceUrl": "https://www.computerhope.com/jargon/m/example.mp3" } }, ..............
Я делаю проще.
1) В diff вписываю контейнер
{ "operation": "insert", "name": "AudioContainer", "values": { "afterrerender": { "bindTo": "prepareCallRecord" }, "afterrender": { "bindTo": "prepareCallRecord" }, "id": "AudioContainer", "visible": true, "itemType": 7 }, "parentName": "CallPageGeneralBlock", "propertyName": "items" }
2) После его отрисовки вставляю туда дефолтный плеер
prepareCallRecord: function() { //вытаскиваем url записи this.setPlayer(url); }, setPlayer: function(url) { var element = document.createElement("audio"); element.addEventListener("click", function(e) { e.stopPropagation(); }, false); element.autoplay = false; element.controls = true; element.src = url; element.type = "audio/mpeg"; actionsDiv.appendChild(element); }