首页前端开发HTMLhtml代码大全录音

html代码大全录音

时间2023-11-16 14:55:03发布访客分类HTML浏览302
导读:HTML代码大全,是各位前端开发工程师最常用的一个参考手册,本文主要介绍其中一个重点内容——录音HTML代码大全。录音HTML代码大全收录了各种类型、各种用途的录音HTML代码,包括录音的基本用法和高级用法等。<code><...

HTML代码大全,是各位前端开发工程师最常用的一个参考手册,本文主要介绍其中一个重点内容——录音HTML代码大全。

录音HTML代码大全收录了各种类型、各种用途的录音HTML代码,包括录音的基本用法和高级用法等。

code>
    audio controls>
      source src="example.mp3" type="audio/mpeg">
      Your browser does not support the audio element./audio>
    /code>
    

上述代码是录音的基本HTML代码,其中audio是HTML5新增的元素,用于在浏览器中播放音频文件,而controls属性则指定了渲染播放器时添加播放、暂停、音量控制等功能按钮,同时source> 标签用于提供音频资源的URL和MIME类型,此处指定了mp3格式的音频文件。

code>
    button onclick="record()">
    Record/button>
    button onclick="stop()">
    Stop Recording/button>
    audio id="player" controls>
    /audio>
    script>
  function record() {
    navigator.mediaDevices.getUserMedia({
audio: true}
)      .then(function(stream) {
            const recorder = new MediaRecorder(stream);
            recorder.start();
            setTimeout(stopRecording, 5000);
                function stopRecording() {
              recorder.stop();
          const blob = new Blob(recordedChunks, {
     type : 'audio/ogg;
 codecs=opus' }
    );
              const url = URL.createObjectURL(blob);
              document.getElementById("player").src = url;
        }
                    const recordedChunks = [];
        recorder.ondataavailable = function(e) {
              recordedChunks.push(e.data);
        }
    ;
    }
    );
  }
    function stop() {
        recorder.stop();
  }
    /script>
    /code>
    

上述代码是HTML录音的高级用法,其中通过调用浏览器提供的Web API实现录音功能,包括启动媒体设备、开始录音、停止录音等操作,并将录制的音频转换为二进制模式再通过audio> 标签进行播放展示。

以上就是录音HTML代码大全的基本和高级用法介绍,希望对各位开发工程师有所帮助。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: html代码大全录音
本文地址: https://pptw.com/jishu/541862.html
html代码大全单词 html代码快速编辑器

游客 回复需填写必要信息