Zammad: Play audio files from attachment in browser

Zammad is a great ticketing system that allows for efficient handling of support requests. However, when used with answering machines or Voice2Mail systems, the system has a weakness. Audio files, which are attached to the email, are not played directly in the ticket and in the web browser itself, but must first be downloaded. For agents handling tickets from voicemail systems, this means considerable additional effort for many messages and constant switching between Zammad and a locally installed audio player.

With a small change, Zammad adds an HTML5 player to all tickets with audio files for direct playback in the browser. The instructions are for Zammad 4.1 on Debian, but can certainly be implemented for other versions as well.

To do this, you need to edit the file /opt/zammad/app/assets/javascripts/app/views/generic/attachments.jst.eco. After the “</a>” in line 27, code is inserted for this purpose, so that the entire file has the following content.

<% if !_.isEmpty(@attachments): %>
  <div class="attachments attachments--list">
    <%- @Icon('paperclip') %>
    <div class="attachments-title"><%- @attachments.length %> <%- @T('Attached Files') %></div>
    <% for attachment in @attachments: %>
      <% if !@C('ui_ticket_zoom_attachments_preview'): %>
        <div class="attachment attachment--row">
          <a class="attachment-name u-highlight" href="<%= attachment.url %>" data-type="attachment" <% if @canDownload(content_type): %>download<% else: %>target="_blank"<% end %>><%= attachment.filename %></a>
          <div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
        </div>
      <% else: %>
        <% content_type = @ContentOrMimeType(attachment) %>
        <a class="attachment attachment--preview" href="<%= attachment.url %>" data-type="attachment"<% if @canDownload(content_type): %> download<% else: %>target="_blank"<% end %>>
          <div class="attachment-icon">
          <% if attachment.preferences && content_type && @ContentTypeIcon(content_type): %>
            <% if @canPreview(content_type): %>
              <img src="<%= attachment.preview_url %>">
            <% else: %>
              <%- @Icon( @ContentTypeIcon(content_type) ) %>
            <% end %>
          <% else: %>
            <%- @Icon('file-unknown') %>
          <% end %>
          </div>
          </a>
           <% if attachment.filename[-3..attachment.filename.length].toLowerCase() == 'mp3': %>
            <span class='attachment-name u-highlight '>
              <audio class="custom-player w-100" controls>
                <source src="<%= attachment.preview_url + attachment.filename %>" type="audio/mpeg">
                Browser unterstützt die direkte Wiedergabe nicht.
              </audio>
            </span>
            <% else if attachment.filename[-3..attachment.filename.length].toLowerCase() == 'wav': %>
            <span class='attachment-name u-highlight '>
               <audio class=" custom-player wav w-100" controls>
                <source src="<%= attachment.preview_url + attachment.filename %>" type="audio/wav">
                Browser unterstützt die direkte Wiedergabe nicht.
              </audio>
            </span>
            <% else: %>
              <span class="attachment-name u-highlight">
                <%- attachment.filename %>
              </span>
          <% end %>
          <div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
      <% end %>
    <% end %>
  </div>
<% end %>

After the file has been saved, the changes must be applied and Zammad restarted. To do this, the following commands are executed on the server:

zammad run rake assets:precompile
systemctl restart zammad

Afterwards, even with already existing tickets, an HTML5 audio player is displayed in the browser instead of the download and the attachment can be played immediately.