celticsfan celticsfan - 7 months ago 26
Javascript Question

Getting HTML 5 Audio Control file location and updating src without using id selector

I would like to get the file location as shown in the Javascript alert but without using the id selector and then update the corresponding src attribute. I have tried all sort of Jquery selectors but I can't seem to get the syntax correct. There may be an unlimited amount of audio controls on the form and not just 3 so that is why I don't want to pinpoint the file location by id.



function uploadAudioFile(that) {

// would like to get the file info shown in the alert below after a user upload an MP3 and selects the "Upload Audio File" button but without using an id tag.

var audio_file = $(that).parent().next("audio");
alert(audio_file);
var val = audio_file.val();
alert(val);
//to select source you can use .find(), to update source .attr()

var source = audio_file.find("source").attr("src", "updatedsong.mp3") //phony song for demo purposes
alert(source);

// would also like to know the jquery for updating the src attribute
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">

<div class="media">

<div class="panel-heading">
<label></label>
</div>

<div class="form-inline">
<label>Artist</label>
<input name="album" class="form-control" size="64" type="text" value="" />

<h3 class="customize-heading"></h3>

<div class="form-group-audio">

<div class="audio-controls">

<label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
<input id="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
<span class="input-group-btn">
<input type="button" onclick="uploadAudioFile(this);" class="btn btn-info" name="audio_search" value="Upload Audio File" />
</span>
<audio id="mplayer" class="player" controls="controls" preload="metadata">
<source src="song1.mp3" />
</audio>
</div>
</div>

</div>

<label>Song</label>

<div class="form-inline">
<input name="song" class="form-control" type="text" value="" />
</div>


<br>
<br>
<br>
<label>Artist</label>
<input name="album" class="form-control" size="64" type="text" value="" />

<h3 class="customize-heading"></h3>

<div class="form-group-audio">

<div class="audio-controls">

<label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
<input id="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
<span class="input-group-btn">
<input type="button" onclick="uploadAudioFile(this);" class="btn btn-info" name="audio_search" value="Upload Audio File" />
</span>
<audio id="mplayer" class="player" controls="controls" preload="metadata">
<source src="song2.mp3" />
</audio>
</div>
</div>

</div>

<label>Song</label>

<div class="form-inline">
<input name="song" class="form-control" type="text" value="" />
</div>


<br>
<br>
<br>
<label>Artist</label>
<input name="album" class="form-control" size="64" type="text" value="" />

<h3 class="customize-heading"></h3>

<div class="form-group-audio">

<div class="audio-controls">

<label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
<input id="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
<span class="input-group-btn">
<input type="button" onclick="uploadAudioFile(this);" class="btn btn-info" name="audio_search" value="Upload Audio File" />
</span>
<audio id="mplayer" class="player" controls="controls" preload="metadata">
<source src="song3.mp3" />
</audio>
</div>
</div>

</div>

<label>Song</label>

<div class="form-inline">
<input name="song" class="form-control" type="text" value="" />
</div>




Answer

Edit, Updated

Did not initally notice duplicate id's within document. Replaced duplicate ids "audiofile" , "mplayer" with className at html.

Substituted .click() for inline event attribute onclick at .btn.btn-info element, used event.preventDefault(), event.stopPropagation() within uploadAudioFile(); add oncanplaythrough event listener using .on() for <audio> elements, replaced <source> element with setting src attribute at audio element at change event for <input type="file"> element.

At click of .btn.btn-info element, call click() on input type="file" element for Open File dialog to be displayed at click of input type="button" element.

Call alert() with uploaded File.name, File.type.

Use URL.createObjectURL() on selected File object to convert to a blob: URL, $(this).sliblings("audio") selector within handleFile function, which references <audio> sibling of <input type="file"> element, set src of audio element to objectURL, which should invoke oncanplaythrough handler, call .play() on DOM <audio> element to play uploaded audio file.

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $("audio").on("canplaythrough", function(event) {
      this.play();
    });

    function handleFile(e) {
      var file = e.target.files[0];
      var src = URL.createObjectURL(file);
      // would like to get the file info shown in the alert below
      alert("name:" + file.name + " type:" + file.type);
      $(this).siblings("audio")
        // would also like to know the jquery for updating the src attribute
      .attr("src", src)
    }

    function uploadAudioFile(e) {
      //  after a user upload an MP3 and selects the 
      // "Upload Audio File" button but without using an id tag.
      e.preventDefault();
      e.stopPropagation();
      $(this).parent().siblings(":file").click();
    }
    $(".btn.btn-info").click(uploadAudioFile);
    $(":file").change(handleFile)
  })
</script>

html

<span class="input-group-btn">
<input type="button" 
       class="btn btn-info" 
       name="audio_search"  
       value="Upload Audio File" />
</span>
<audio id="mplayer" 
       class="player" 
       controls="controls" 
       preload="metadata">
<!-- <source src="" /> -->

You should be able to use .parent(), .next()

var audio_file = $(that).parent().next("audio");
var val = audio_file.val()

to select source you can use .find(), to update source .attr()

var source = audio_file.find("source").attr("src", /* new source */)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $("audio").on("canplaythrough", function(event) {
      this.play();
    });

    function handleFile(e) {
      var file = e.target.files[0];
      var src = URL.createObjectURL(file);
      // would like to get the file info shown in the alert below
      alert("name:" + file.name + " type:" + file.type);
      $(this).siblings("audio")
        // would also like to know the jquery for updating the src attribute
        .attr("src", src)
    }

    function uploadAudioFile(e) {
      //  after a user upload an MP3 and selects the 
      // "Upload Audio File" button but without using an id tag.
      e.preventDefault();
      e.stopPropagation();
      $(this).parent().siblings(":file").click();
    }
    $(".btn.btn-info").click(uploadAudioFile);
    $(":file").change(handleFile)
  })
</script>

<div class="form-group">

  <div class="media">

    <div class="panel-heading">
      <label></label>
    </div>

    <div class="form-inline">
      <label>Artist</label>
      <input name="album" class="form-control" size="64" type="text" value="" />

      <h3 class="customize-heading"></h3>

      <div class="form-group-audio">

        <div class="audio-controls">

          <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
          <input class="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
          <span class="input-group-btn">
							<input type="button" class="btn btn-info" name="audio_search"  value="Upload Audio File" />
						</span>
          <audio class="mplayer" class="player" controls="controls" preload="metadata">
            <!-- <source src="" /> -->
          </audio>
        </div>
      </div>

    </div>

    <label>Song</label>

    <div class="form-inline">
      <input name="song" class="form-control" type="text" value="" />
    </div>


    <br>
    <br>
    <br>
    <label>Artist</label>
    <input name="album" class="form-control" size="64" type="text" value="" />

    <h3 class="customize-heading"></h3>

    <div class="form-group-audio">

      <div class="audio-controls">

        <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
        <input class="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
        <span class="input-group-btn">
							<input type="button" class="btn btn-info" name="audio_search"  value="Upload Audio File" />						</span>
        <audio class="mplayer" class="player" controls="controls" preload="metadata">
          <!-- <source src="" /> -->
        </audio>
      </div>

    </div>

    <label>Song</label>

    <div class="form-inline">
      <input name="song" class="form-control" type="text" value="" />
    </div>


    <br>
    <br>
    <br>
    <label>Artist</label>
    <input name="album" class="form-control" size="64" type="text" value="" />

    <h3 class="customize-heading"></h3>

    <div class="form-group-audio">

      <div class="audio-controls">

        <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
        <input class="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
        <span class="input-group-btn">
							<input type="button"

                                   class="btn btn-info" name="audio_search"  value="Upload Audio File" />

      </span>
        <audio class="mplayer" class="player" controls="controls" preload="metadata">
          <!-- <source src="" /> -->
        </audio>
      </div>
    </div>

  </div>

  <label>Song</label>

  <div class="form-inline">
    <input name="song" class="form-control" type="text" value="" />
  </div>