jQuery -将每个记录的音频文件从行分别推送到表的行中的输入字段

h5qlskok  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(109)

1.我有一个表下面有2行,但它可以用一个按钮(添加另一个Word媒体)和只有一个提交按钮的所有行:

<tbody>
    <tr class="form-row dynamic-medias" id="medias-0">
        <td class="field-path_to_file">
            <div id="medias-0-path_to_file_with_media_recorder">
                <div class="py-2">
                    <input type="file" name="medias-0-path_to_file" class="bg-slate-100 p-2"
                        id="id_medias-0-path_to_file">
                </div>

                <p>
                    Or record an audio
                </p>

                <div class="btn-group" role="group">
                    <button id="medias-0-path_to_file_record_start" type="button"
                        class="px-2 py-1 text-white bg-green-500 disabled:bg-gray-500 rounded-sm"
                        onclick="startRecording(this)">
                        Record
                    </button>
                    <button id="medias-0-path_to_file_record_stop" type="button"
                        class="px-2 py-1 text-white bg-red-500 disabled:bg-gray-500 disabled:text-gray-200 rounded-sm"
                        onclick="stopRecording(this)" disabled="">
                        Stop
                    </button>
                </div>
                <div class="recording" id="medias-0-path_to_file-record-status">
                    <span class="text-sm">
                        Click the "Start Recording" button to start recording
                    </span>
                </div>
            </div>

            <audio controls="" src="blob:http://localhost:8000/79977bf5-155b-4ca1-b5bc-097b8a55a80a"></audio><a
                download="Recorded-Media"
                href="blob:http://localhost:8000/79977bf5-155b-4ca1-b5bc-097b8a55a80a">Download it!</a>
        </td>
    </tr>

    <tr class="form-row dynamic-medias" id="medias-1">
        <td class="field-path_to_file">
            <div id="medias-1-path_to_file_with_media_recorder">
                <div class="py-2">
                    <input type="file" name="medias-1-path_to_file" class="bg-slate-100 p-2"
                        id="id_medias-1-path_to_file">
                </div>
                <p>
                    Or record an audio
                </p>
                <div class="btn-group" role="group">
                    <button id="medias-1-path_to_file_record_start" type="button"
                        class="px-2 py-1 text-white bg-green-500 disabled:bg-gray-500 rounded-sm"
                        onclick="startRecording(this)">
                        Record
                    </button>
                    <button id="medias-1-path_to_file_record_stop" type="button"
                        class="px-2 py-1 text-white bg-red-500 disabled:bg-gray-500 disabled:text-gray-200 rounded-sm"
                        onclick="stopRecording(this)" disabled="">
                        Stop
                    </button>
                </div>
                <div class="recording" id="medias-1-path_to_file-record-status">
                    <span class="text-sm">
                        Click the "Start Recording" button to start recording
                    </span>
                </div>
            </div>
            <audio controls="" src="blob:http://localhost:8000/cd165412-b186-4a11-8fd7-6997750b9bd3"></audio><a
                download="Recorded-Media"
                href="blob:http://localhost:8000/cd165412-b186-4a11-8fd7-6997750b9bd3">Download it!</a>
        </td>
    </tr>

    <tr class="add-row">
        <td colspan="4"><a href="#">Add another Word media</a></td>
    </tr>

</tbody>

1.下面是一个jQuery脚本,它从一个小的音频播放器中获取每一行的录音,并在点击提交按钮时将其移动到input type=“file”字段中。(顺便说一下,这是一个Django管理面板表单)

$( document ).ready(function() {
    $('input[type=submit]').click(async function(e) {
        let url = $('audio').attr('src')
        if(url != undefined){
            const fileInput = document.querySelector('input[type="file"]');

            let file = await fetch(url)
                    .then(r => r.blob())
                    .then(blobFile => new File([blobFile], "user_recording.mp3", { type: "mp3" }))

            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            fileInput.files = dataTransfer.files;
        }
        $('#word_form').submit()
    });
});

问题是jQuery脚本只适用于第一行和一行。有人能帮我修改上面的脚本,使其适用于每一行循环(每一行都有自己的音频标签)吗?并且所有行都只有一个提交按钮。对不起,我的英语(这不是我的母语:))

j7dteeu8

j7dteeu81#

感谢Amit Singh和freedomn-m的评论,他们给予了我们一个循环的想法:

$( document ).ready(function() {
    $('input[type=submit]').click(async function(e) {
      let url = $('audio').each(function(){
      });

      for (i=0; i<url.length; i++) {
        new_url = url[i].getAttribute("src");
        if (new_url != undefined){
          const fileInput = document.getElementById('id_medias-'+i+'-path_to_file');
          let file = await fetch(new_url).then(r => r.blob()).then(blobFile => new File([blobFile], "user_recording.mp3", { type: "mp3" }))

          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(file);
          fileInput.files = dataTransfer.files;
        } 
      }
      $('#word_form').submit()
    });
});

相关问题