Add audio type to Url field formatter (#17422) (#17463)

docs/management/field-formatters/url-formatter.asciidoc

@@ -2,6 +2,7 @@ The `Url` field formatter can take on the following types:
 
 * The *Link* type turn the contents of the field into an URL.
 * The *Image* type can be used to specify an image directory where a specified image is located.
+* The *Audio* type can be used to specify an audio directory where a specified audio file is located.
 
 You can customize either type of URL field formats with templates. A _URL template_ enables you to add specific values
 to a partial URL. Use the string `{{value}}` to add the contents of the field to a fixed URL.
@@ -21,6 +22,8 @@ example, field contents `users/admin` result in the URL template adding `users%2
 When the formatter type is set to *Image*, the `{{value}}` template string specifies the name of an image at the
 specified URI.
 
+When the formatter type is set to *Audio*, the `{{value}}` template string specifies the name of an audio file at the specified URI.
+
 In order to pass unescaped values directly to the URL, use the `{{rawValue}}` string.
 
 A _Label Template_ enables you to specify a text string that displays instead of the raw URL. You can use the

src/core_plugins/kibana/common/field_formats/types/__tests__/url.js

@@ -13,6 +13,13 @@ describe('UrlFormat', function () {
       .to.be('<span ng-non-bindable><a href="http://elastic.co" target="_blank" rel="noopener noreferrer">http://elastic.co</a></span>');
   });
 
+  it('outputs an <audio> if type === "audio"', function () {
+    const url = new UrlFormat({ type: 'audio' });
+
+    expect(url.convert('http://elastic.co', 'html'))
+      .to.be('<span ng-non-bindable><audio controls preload="none" src="http://elastic.co"></span>');
+  });
+
   it('outputs an <image> if type === "img"', function () {
     const url = new UrlFormat({ type: 'img' });
 

src/core_plugins/kibana/common/field_formats/types/url.js

@@ -89,6 +89,9 @@ export function createUrlFormat(FieldFormat) {
       const label = _.escape(this._formatLabel(rawValue, url));
 
       switch (this.param('type')) {
+        case 'audio':
+          return `<audio controls preload="none" src="${url}">`;
+
         case 'img':
           // If the URL hasn't been formatted to become a meaningful label then the best we can do
           // is tell screen readers where the image comes from.

src/ui/public/field_format_editor/editors/url/url.js

@@ -16,7 +16,8 @@ export function urlEditor() {
 
       this.urlTypes = [
         { id: 'a', name: 'Link' },
-        { id: 'img', name: 'Image' }
+        { id: 'img', name: 'Image' },
+        { id: 'audio', name: 'Audio' }
       ];
 
       $scope.$watch('editor.formatParams.type', function (type, prev) {