在codeigniter中使用ajax上传音频mp3文件

good day. I have a code which can upload image file but I don't know if this code is also work for uploading media file such as mp3. My project need to upload a media file but my code didn't work.

view

form

<form name="uploadform" id="uploadform" method="POST" enctype="multipart/form-data" >
                <div class="form-group">
                    <label for="Title">Song Title</label>
                    <input type="text" class="form-control" id="title" placeholder="Title">
                </div>
                <div class="form-group">
                    <label for="Artist">Artist/Singer</label>
                    <input type="text" class="form-control" id="artist" placeholder="Artist/Singer">
                </div>
                <div class="form-group">
                    <label for="lyrics">Lyrics</label>
                    <textarea class="form-control" id="lyrics" placeholder="Lyrics"></textarea>
                </div>
                <div class="form-group">
                    <label for="Artist">Audio</label>
                    <input type="file" class="form-control" name="file" id="file" accept="audio/mp3">

                </div>

                <div class="form-group">
                <span class="input-group-btn">
                        <button class="btn btn-primary" id="btn">UPLOAD</button>
                  </span>
                </div>

            </form>

view

javascript

$('#btn').click(function() {
var title = document.getElementById('title').value;
var artist = document.getElementById('artist').value;
var lyrics = document.getElementById('lyrics').value;
var file = $('#file').val();
     $.ajax({
  type: "post",
  url: "<?php echo base_url('Admin/upload/')?>",
  cache: false,
  mimeType: "multipart/form-data",
  contentType: false,
  processData: false,
  data: {
    "title" : title,
    "artist" : artist,
    "lyrics" : lyrics,
    "file" : file,
  },
  success: function(data){      
  try{  
   console.log(data);
  }catch(e) {  
   alert('Exception while request..');
  }  
  },
  error: function(){      
   alert('Error while request..');
  }
 });


});

controller

Admin.php

public function upload()
    {
        $title = $this->input->post('title');
        $artist = $this->input->post('artist');
        $lyrics = $this->input->post('lyrics');

         $attachment_file=$_FILES["file"];
              $output_dir = "uploads/";
              $fileName = $_FILES["attachment_file"]["name"];
              move_uploaded_file($_FILES["attachment_file"]["tmp_name"],$output_dir.$fileName);
              echo "File uploaded successfully";

    }

that code gave me an error message.

<h4>A PHP Error was encountered</h4>

<p>Severity: Notice</p>
<p>Message:  Undefined index: file</p>
<p>Filename: controllers/Admin.php</p>
<p>Line Number: 35</p>

I do not know why the file is undefined index since the 'file' is exist on form tag.

my code is not working for uploading mp3. How can I make this problem works?