Предварительный просмотр аудиофайла перед сообщением

Question

Я новичок в этом извинения за любые аномалии. Задача, которую я получил, - создать загружаемую картинку или аудиофайлу или ссылку с предварительным просмотром перед POST.

Не знаете, как поздно я только что открыл Html5 аудио-тег, я хотел бы знать, как просмотреть аудиофайл при выборе перед загрузкой.

вот моя форма загрузки:

<form id="attach" action="imageUpload.php" method="POST" enctype="multipart/form-data" > 
      <h2>Select An Audio File to Upload</h2> 
      <br> 
      <div> 

      <input type='file' id="files" name="files" multiple onchange="previewAudio(this);" /> 
      <br> 
      <br> 
      <output id="list"></output> 
      <ul> 
       <li> 
      <label for="caption">Caption</label> 
      <input type="text" maxlength="30" name="caption" id="caption" /> 
       </li> 
       <li> 
        <textarea id="desc" name="desc" rows="4" cols="32">Description 

        </textarea> 
       </li> 
      </ul> 
      <audio controls>      
       <source id="test3" src="" type="audio/mpeg"> 
       Your browser does not support the audio element. 
      </audio>    
      <input type="submit" value="Upload"/> 
      </div> 
     </form> 

вот код, который я играл с пытаюсь получить его для предварительного просмотра:

function previewAudio(input) 
    { 
     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
     $('#test3').attr('src', e.target.result); 
     } 
      reader.readAsDataURL(input.files[0]); 
     } 

    } 

Я больше всего непреклонен, что это должно работать, но его нет, любые исправления или новые методы будут высоко оценены

Заранее благодарен.

Answer 1

Here это может помочь вам, позволяя обойти использование Java и использовать вместо него пустой HTML.

Я также надеюсь, что это не оскорбляет вас, чтобы указать на то, что я не уверен, что есть способ просто «просмотреть» песню, и вам, возможно, придется устраивать сокращенные версии песни, которые служат в качестве предварительного просмотра -length, чтобы ваши скрипты играли, вместо того, чтобы код автоматически обрезал их.

Answer 2

Благодаря JWarner этой связи была хорошая отправная точка, узнал много в моем почти 5 часов, исследующих это и в конечном итоге найти решение здесь Reading files in JavaScript using the File APIs

вот как я это сделал:

document.addEventListener('DOMContentLoaded', function(){ 
document.getElementById('files').addEventListener('change', handleFileSelect,false); 
    function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

    // Only process image files. 

    if (f.type.match('image.*')) { 
    var reader = new FileReader(); 
alert('e.target.result'); 
    // Closure to capture the file information. 
    reader.onload = (function(theFile) { 
    return function(e) { 
     // Render thumbnail. 

     var span = document.createElement('span'); 

     span.innerHTML = ['<img class="thumb" src="', e.target.result, 
         '" title="', escape(theFile.name), '" width="230" height="270"/>'].join(''); 
     document.getElementById('list').insertBefore(span, null); 

    }; 
    })(f); 
    }else if (f.type.match('audio.*')){ 
    var reader = new FileReader(); 

    // Closure to capture the file information. 
    reader.onload = (function(theFile) { 
    return function(e) { 
     // Render thumbnail. 

     var span = document.createElement('span'); 

    span.innerHTML = ['<audio controls><source src="', e.target.result,' "type="audio/ogg"><source src="', e.target.result,' "type="audio/mpeg"></audio>'].join(''); 
     document.getElementById('list').insertBefore(span, null); 

    }; 
    })(f); 
} 
    // Read in the image file as a data URL. 
    reader.readAsDataURL(f); 
} 
    } }, false); 

Пожалуйста, укажите любые слабые места в этом коде, если они есть. Thank you