javascript - 使用 JQuery 自动录制并允许播放一次-6ren

javascript - 使用 JQuery 自动录制并允许播放一次

转载作者：行者123 更新时间：2023-11-28 14:57:31

24

4

大家好，

         Below is the sample code for record.

<html>
  <body>
    <audio controls autoplay></audio>

    <input onclick="startRecording()" type="button" value="start recording" />
    <input onclick="stopRecording()" type="button" value="stop recording and play" />

    <script>
      var onFail = function(e) {
        console.log('Rejected!', e);
      };

      var onSuccess = function(s) {
        stream = s;
      }

      window.URL = window.URL || window.webkitURL;
      navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

      var stream;
      var audio = document.querySelector('audio');

      function startRecording() {
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true}, onSuccess, onFail);
        } else {
          console.log('navigator.getUserMedia not present');
        }
      }

      function stopRecording() {
        audio.src = window.URL.createObjectURL(stream);
      }
    </script>
  </body>
</html>

我想要做的是 setInterval 为 40 秒，它将缓冲 40 秒，就像录音将在 40 秒内开始计时器将在 40 秒后运行，它将显示播放按钮以检查录制的音频。下面我添加了示例屏幕截图

进度条将显示录音。同样，音频也会出现一些问题，我需要在音频完成播放后开始录音。如果有人知道此问题的解决方案，请帮助我。感谢您的支持

最佳答案

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <style>
    .center_div {
      width: 500px;
      height: 100px;
      background-color: #f5f5f5;
      border: 1px solid #808080;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -250px;
      /* half width*/
      margin-top: -50px;
      /* half height*/
      padding: 25px;
    }

    .recording_label {
      display: block;
      text-align: center;
      padding: 10px;
      font-family: sans-serif;
      font-size: 1.1em;
      margin-bottom: 25px;
    }

    .loader_bg {
      min-width: 100%;
      background: #c5c5c5;
      min-height: 20px;
      display: block;
    }

    .loader_bg1 {
      min-width: 90%;
      background: grey;
      min-height: 20px;
      display: inline-block;
      position: relative;
      top: -20px;
    }
  </style>
</head>

<body>


  <audio controls autoplay></audio>

  <input onclick="startRecording();" type="button" value="start recording" />
  <input onclick="stopRecording();" type="button" value="stop recording and play" />


  <div class="center_div">
    <span class="recording_label">Please wait...</span>
    <span class="loader_bg"></span>
    <span class="loader_bg1"></span>



  </div>




  <script>
    var onFail = function(e) {
      console.log('Rejected!', e);
    };

    var onSuccess = function(s) {
      stream = s;
    }

    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var stream;
    var audio = document.querySelector('audio');

    function startRecording() {
      if (navigator.getUserMedia) {
        navigator.getUserMedia({
          audio: true
        }, onSuccess, onFail);
      } else {
        console.log('navigator.getUserMedia not present');
      }
    }

    function stopRecording() {
      audio.src = window.URL.createObjectURL(stream);
    }

    $(function() {
      var max = 40;
      var count = max + 1;
      var counter = setInterval(timer, 1000);

      function timer() {
        count = count - 1;
        if (count <= 0) {
          clearInterval(counter);
          $(".recording_label").html("Recording...");
          $('.loader_bg1').css({
            'min-width': '' + (100) + '%'
          })
          startRecording();
          recordingSec(40);
          return;
        }
        $(".recording_label").html("Recording will begin in " + count + " sec.");
        var percent = (count / max) * 100;
        $('.loader_bg1').css({
          'min-width': '' + (100 - percent) + '%'
        })
      }
    });



    function recordingSec(sec) {
      var count = sec + 1;
      var counter = setInterval(timer, 1000);

      function timer() {
        count = count - 1;
        if (count <= 0) {
          clearInterval(counter);
          $(".recording_label").html("Recording stopped...Playing");
          $('.loader_bg1').css({
            'min-width': '' + (100) + '%'
          })
          stopRecording();
          return;
        }
        $(".recording_label").html("Recording started [ " + (sec - count) + " / " + sec + " ] sec.");
        var percent = (count / sec) * 100;
        $('.loader_bg1').css({
          'min-width': '' + (100 - percent) + '%'
        })
      }
    }
  </script>
</body>

</html>

关于javascript - 使用 JQuery 自动录制并允许播放一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42295781/

24

4

0

文章推荐： javascript - D3 JS 传递给匿名函数的 F 是什么意思？

文章推荐： javascript - IE6 不会承认动态添加内容的新样式含义

文章推荐： css - 文本宽度可变的菜单栏

文章推荐： jquery - 创建额外的标签

jqueryscrollLeft 自动？
我想做的是，如果鼠标位于“下一个”按钮上，它会以慢速向右滚动，如果鼠标没有位于“下一个”按钮上，它会停止滚动？这是我的尝试http://jsfiddle.net/mdanz/nCCRy/14/ $(
.net - 自动 StyleCop
StyleCop 是一个很棒的视觉工作室小插件。但它不会向您显示实时提示或提供任何自动修复。随之而来的是 reSharper 和 StyleCop for reSharper，这是理想的解决方案，但
elasticsearch - 将MatchQuery的模糊性设置为“自动”
我为我的MatchQuery使用了模糊性选项，但是我想将模糊性值设置为auto。有什么办法吗？另外，对于完成建议程序，您可以将其设置为支持unicode，对于我的MatchQuery，有什么方法可以
java 将表行映射到对象(自动)
我想从表中获取一行[字符串名称，字符串密码，int 某些内容]并将其映射到一个 User 对象，该对象具有 3 个属性，如上面的 getter 和 setter有什么方法可以自动完成吗？我考虑过反射，
c# - 自动 .ToString()？
我有一个像这样的方法:void m1(string str) 并且有一个像这样的类: public class MyClass { public bool b1 { set; get; }
javascript - 自动$广播数据
我正在尝试使用 $rootScope 从一个 Controller 向另一个 Controller $broadcast 一些数据。如果我使用像 ng-click 这样的触发器来运行将广播的功能，它
mysql - 自动/手动缓存的优缺点
我考虑了很多关于是要使用完全自动化的缓存还是手动缓存。我们的自动方法是一种解决方案，它可以挖掘数据库、查询和格式化每个潜在和 future 的数据请求，并将其保存到适当的缓存存储(内存缓存或基于磁盘
css 悬停替代(自动)
我的 CSS 必须使用过渡来更改，直到现在我都使用 div:hover 来实现。当您单击另一个 div 时需要激活过渡，而不是当您将鼠标悬停在必须移动/更改的 div 上时。我该怎么做？谢谢永
快速动画持续时间，即使我不想(自动？)
在我的应用程序中，我需要一些动画，但如果它已经设置了动画，则不需要持续时间。但我的问题是它会自动添加持续时间。在这里你可以看到 2 个函数，第二个没有持续时间但它确实有持续时间(可能从 1 秒开始)
php - 自动 uploader
两年前，我需要制作一个工具，通过 POST 自动将 txt/csv 文件上传到我的 Web 服务器，然后使用 cronjob 通过 PHP 对其进行解析。这有两次在每天午夜自动发生。尽管这行得通，但
c - 函数参数中的数组名称的处理方式是否与本地声明的数组不同(自动)
请阅读下面程序中的评论: #include void test(char c[]) { c=c+2; //why does this work ? c--; printf("%
c++ - 自动/静态内存分配
也许是个幼稚的问题，但是...... 确认或拒绝: 自动和静态存储持续时间的对象/变量的内存的存在是在编译时确定的，程序运行时失败的可能性绝对为零，因为没有足够的内存用于自动对象。自然地，当自动对象
c# - 自动 INotifyPropertyChanged
有没有什么方法可以自动获得类中属性更改的通知，而不必在每个 setter 中都编写 OnPropertyChanged？ (我有数百个属性，我想知道它们是否已更改)。安东建议 dynamic pro
azure-pipelines - 基于源分支的不同合并策略(自动)
我们在使用 Azure DevOps 的项目中采用了 gitflow 流程。我有以下场景: 当功能分支合并到 Develop 时，我想在完成拉取请求的同时执行压缩合并策略当 Release 分支定期
AngularJS 自动 HTML 编码符号
我的网站上有一个评论部分，我将 html 编码的评论保存在我的数据库中。所以我添加了这条评论- "testing" `quotes` \and backslashes\ and html 并将其保存在
签到前 TFS 自动 checkout
是否存在“ checkin 前 TFS 自动 checkout ”这样的功能，以便在我说“ checkin ”之前我不会 checkout 任何文件，例如以防我只是临时更改文件 - 这一直发生。换句
apache - 自动 Apache 服务器维护页面
我有一个运行在 Linux/Apache/Tomcat 堆栈上的网站，它需要每隔几个月自动脱机以进行服务器维护，这将持续任意时间。有哪些选项可以让 Apache 建立和取消“服务器维护”页面？我需要
vba - 自动 Excel 首字母缩写词查找和定义添加
我经常在工作中创建文档，在公司内部，由于我们使用的首字母缩写词和缩写词的数量，我们几乎拥有自己的语言。因此，我厌倦了在发布文档之前手动创建首字母缩写词和缩写表，并且快速的谷歌搜索发现了一个可以有效地为
Excel:是否存在检测计算模式变化的事件(自动/手动)
我希望在用户或宏将计算模式从自动更改为手动或手动更改为自动时运行代码。是否有为此触发的事件？ (属性是 Application.Calculation 在 Excel 互操作中。) 使用 Excel
bash - 自动 Bash 脚本
这个问题在这里已经有了答案: Repeat command automatically in Linux (13 个回答) 6年前关闭。我想创建一个脚本来获取另一个文件夹中的所有文件夹名称。并为这些

首页

博学

6Ren·AI

商城

javascript - 使用 JQuery 自动录制并允许播放一次