发布前预览音频文件

Posted 2023-02-25

【中文标题】发布前预览音频文件

【英文标题】：Preview an audio file before Post

【发布时间】：2013-09-13 18:47:32

【问题描述】：

我是新来的，对任何异常表示歉意，我得到的任务是在 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]);
        

    

我坚信这应该有效，但它不是，任何修复或新方法都将受到高度赞赏

提前致谢。

【参考方案1】：

感谢 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), '"     />'].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);

如果有任何不足之处，请指出此代码中的任何弱点 谢谢你

【参考方案2】：

Here 是 可能 帮助您的东西，允许您绕过 Java 的使用而改用纯 HTML。

我也希望它不会侮辱您指出，我不确定是否有一种方法可以“预览”一首歌曲，并且您可能必须托管该歌曲的缩短版本作为预览 -长度，以便您的脚本播放，而不是让代码自动截断它们。