CODEWITHSUNDEEP
javascripthtmljquery
shadow_blade
shadow_blade

Reputation: 103

How can I put SRC in a append html using Audio or Video?

I am trying to append a source file either it is a mp3 or video in a html.

so if the user select Audio in the select option. my html will append a audio src html same for the video.

Here is my example.

  $(document).ready(function() {
     
    var previewBox = document.getElementById("myAudio");
    
    $("#photo").change(function(event) {
      tmppath = URL.createObjectURL(event.target.files[0]);
      previewBox.src = URL.createObjectURL(event.target.files[0]);
      $(this).removeAttr("disabled");
    });
  
    $("#component_type").change(function () {

        var component_value = $("#component_type :selected").val();

        if (component_value == 0) {
          $('#audio_preview').empty();
          $("#audio_preview").append(
             '<audio controls id="myAudio" preload="metadata"> '+
              '<source id = "myAudioSrc" src="" >' +
              'Your browser does not support the audio element.'+
             '</audio>'
           );
         }else if (component_value == 1) {
          $('#audio_preview').empty();
          $("#audio_preview").append(
             '<video controls id="myAudio" preload="metadata"> '+
              '<source id = "myAudioSrc" src="" >' +
              'Your browser does not support the audio element.'+
             '</video>'
           );
        }else{
          console.log("Wala to");
        }

    });
    
});
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
    
    <div class="form-body">
        <div class="form-group">
            <label class="control-label col-md-3" id="label-photo">Upload</label>
            <div class="col-md-9">
                <input id="photo" name="photo" required="required" type="file" class="form-control upload_valid" accept="audio/mpeg3">
                <span id="upload_warning" class="help-block"></span>
            </div>
        </div>
    </div>

    <div class="col-md-9">
      <select name= "component_type" class="form-control" id="component_type">
        <option value="" selected disabled>Choose Set</option>
        <option value="0" >Audio</option>
        <option value="1" >Video</option>
      </select>
        <span class="help-block"></span>
    </div>
    
    <div class="form-group" id="audio-preview">
      <div class="form-group">
        <div id="audio_preview">
          <audio controls id="myAudio" preload="metadata">
            <source id = "myAudioSrc" src="" >
            Your browser does not support the audio element.
          </audio>
        </div>
      </div>
    </div>
</div>
</body>
</html>

My goal is when the user choose Audio in select the user uploaded a file it should have a preview about what the user uploaded. same for the Video, so if the user choose Video, the html form should remove the Audio html and change it to Video html so that the user can preview the video.

How can I make my audio or video to be on source when it is on append? is there a way to do this?

Upvotes: 1

Views: 833

Answers (2)

mehdim2
mehdim2

Reputation: 129

You can do simply this :

let video_audio = {
    audio: document.getElementById('audio'),
    video: document.getElementById('video')
}
video_audio.audio.style.display = "none"
video_audio.video.style.display = "none"
function play_audio () {
    video_audio.audio.style.display = ""
    video_audio.video.style.display = "none"
    
  video_audio.video.currentTime = 0
    video_audio.audio.currentTime = 0
    
  video_audio.audio.play()
    video_audio.video.pause()
}
function play_video () {
    video_audio.video.style.display = ""
    video_audio.audio.style.display = "none"

    video_audio.video.currentTime = 0
    video_audio.audio.currentTime = 0
    
  video_audio.video.play()
    video_audio.audio.pause()
}

<table>
    <tbody>
        <tr>
            <td><button onclick="play_audio()">Audio</button></td>
            <td><button onclick="play_video()">Video</button></td>
        </tr>
    </tbody>
</table>
<video controls width="250" id="video"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"></video>
<audio id="audio" controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>

If you want to change the src file you just need to change the src from html. If your file can't be accessible directly with a path you should said it.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337626

You don't need to have the user select the file type, you can detect it from the MIME type of the selected file. If it's an audio file then you can create an <audio /> element and begin playback and the same for a <video /> element.

The below works well with mp3 and mp4 files respectively, and probably others too, but that's all I have to hand.

$(document).ready(function() {
  $("#photo").change(function(event) {
    let file = this.files[0];
    let mime = file.type;
    
    let $player;
    if (/^audio/.test(mime)) { // audio
      $player = $('<audio autoplay controls />');
    } else if (/^video/.test(mime)) { // video
      $player = $('<video autoplay />');
    } else {
      console.log('Invalid file selected...');
      return;
    }
    
    $('#preview').empty().append($player);
    $player[0].src = URL.createObjectURL(file);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="form-group">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3" id="label-photo">Upload</label>
      <div class="col-md-9">
        <input id="photo" name="photo" required="required" type="file" class="form-control upload_valid" accept="audio/*, video/*">
        <span id="upload_warning" class="help-block"></span>
      </div>
    </div>
  </div>

  <div class="form-group" id="preview"></div>
</div>

Upvotes: 1

Related Questions