Feature #19822, users can preview audio in a repository.

app/assets/stylesheets/framework/files.scss

@@ -108,12 +108,14 @@
     background: $white-light;
 
     &.image_file,
+    &.audio,
     &.video {
       background: $gray-darker;
       text-align: center;
       padding: 30px;
 
       img,
+      audio,
       video {
         max-width: 80%;
       }

app/models/blob.rb

@@ -32,6 +32,7 @@ class Blob < SimpleDelegator
     BlobViewer::Balsamiq,
 
     BlobViewer::Video,
+    BlobViewer::Audio,
 
     BlobViewer::PDF,
 

app/models/blob_viewer/audio.rb

+# frozen_string_literal: true
+
+module BlobViewer
+  class Audio < Base
+    include Rich
+    include ClientSide
+
+    self.partial_name = 'audio'
+    self.extensions = UploaderHelper::SAFE_AUDIO_EXT
+    self.binary = true
+  end
+end

app/models/blob_viewer/video.rb

@@ -8,7 +8,5 @@ module BlobViewer
     self.partial_name = 'video'
     self.extensions = UploaderHelper::SAFE_VIDEO_EXT
     self.binary = true
-    self.switcher_icon = 'film'
-    self.switcher_title = 'video'
   end
 end

app/views/projects/blob/viewers/_audio.html.haml

+.file-content.audio
+  %audio{ src: blob_raw_path, controls: true, data: { setup: '{}' } }

changelogs/unreleased/19822-audio-preview-in-repo.yml

+---
+title: Users can preview audio files in a repository.
+merge_request: 18354
+author: Jesse Hall @jessehall3
+type: added

spec/models/blob_spec.rb

@@ -320,6 +320,22 @@ describe Blob do
         expect(blob.rich_viewer).to be_a(BlobViewer::Markup)
       end
     end
+
+    context 'when the blob is video' do
+      it 'returns a video viewer' do
+        blob = fake_blob(path: 'file.mp4', binary: true)
+
+        expect(blob.rich_viewer).to be_a(BlobViewer::Video)
+      end
+    end
+
+    context 'when the blob is audio' do
+      it 'returns an audio viewer' do
+        blob = fake_blob(path: 'file.wav', binary: true)
+
+        expect(blob.rich_viewer).to be_a(BlobViewer::Audio)
+      end
+    end
   end
 
   describe '#auxiliary_viewer' do