html实现录音和播放功能

Posted 2023-05-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html实现录音和播放功能相关的知识，希望对你有一定的参考价值。

http://www.7k7k.com/swf/132745.htm?qq-pf-to=pcqq.discussion
像这个游戏里面的一样，我想实现两个按钮，一个录音，一个播放，但是不想要有上传，播放器之类的

1、首先新建一个html文档，如图所示。

2、然后在body标签里输入video标签。

3、接着在video标签内输入controls="controls"，如图所示。

4、然后在video标签里输入<source>，接着在<source>内输入src="medias/volcano.ogg"，如图所示。

5、然后在后面输入type="video/ogg"如图所示，然后在定义一个source标签。

6、在标签内输入src="medias/volcano.mp4" type="video/mp4"如图所示。

7、最后按f12预览就可以看到视频播放器了。

参考技术A 通过html实现录音和播放功能需要使用插件实现，但是可以通过html5实现：
1、API通过使用navigatior.getUserMedia()方法来让Web应用程序拥有访问用户摄像头与麦克风设备的能力。
2、录制视频数据与音频数据的代码与之类似：
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
3、在这些代码中,只需使用file控件(类型为file的input元素)即可完成拍照或录制媒体数据的功能。但是在因为这些代码中尚缺乏一些实现与之相关的需求(例如在canvas元素中渲染捕捉到的视频数据,或者对捕捉到的视频数据应用WEBGL滤镜)的能力,所以没有得到开发者的广泛应用。
4、音频与视频信息的捕捉一直是Web开发中的一个难点。许多年来,我们一直依赖浏览器插件来实现这个需求。在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocation API、访问accelerometer设备的Orientation API、访问GPU设备的WebGL API、访问音频播放设备的Web Audio API等等。这些API是非常强大的,因为开发者可以直接通过编写JavaSccript脚本代码来访问底层硬件设备。参考技术B

录音播放实例：(附.JS)

<!DOCTYPE
HTML>
<htmllang="en">
    <head>
        <metacharset = "utf-8"/>
        <title>Chat
by Web Sockets</title>
        <scripttype="text/javascript"src="js/recorder.js">
</script>
        <scripttype="text/javascript"src="js/jquery-1.10.1.min.js">
</script>

        <styletype='text/css'>

        </style>
    </head>
    <body>
        <audiocontrols autoplay></audio>

       <inputtype="button"id="record"value="Record">
       <inputtype="button"id="export"value="Export">
       <divid="message"></div>
    </body>

    <scripttype='text/javascript'>
            var
onFail = function(e)
                console.log('Rejected!',
e);
            ;

            var
onSuccess = function(s)
                var
context = new webkitAudioContext();
                var
mediaStreamSource = context.createMediaStreamSource(s);
                rec
= new Recorder(mediaStreamSource);
                //rec.record();

                //
audio loopback
                //
mediaStreamSource.connect(context.destination);


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

            var
rec;
            var
audio = document.querySelector('#audio');

            function
startRecording()
                if
(navigator.getUserMedia)
                    navigator.getUserMedia(audio:
true, onSuccess, onFail);

else
                    console.log('navigator.getUserMedia
not present');


            startRecording();
            //--------------------
            $('#record').click(function()

                rec.record();
               var
dd = ws.send("start");
                $("#message").text("Click
export to stop recording");

                //
export a wav every second, so we can send it using websockets
                intervalKey
= setInterval(function()
                    rec.exportWAV(function(blob)


                        rec.clear();
                        ws.send(blob);
                        //audio.src
= URL.createObjectURL(blob);
                    );
                ,
3000);
            );

            $('#export').click(function()

                //
first send the stop command
                rec.stop();
                ws.send("stop");
                clearInterval(intervalKey);

                ws.send("analyze");
                $("#message").text("");
            );

            var
ws = new WebSocket("ws://127.0.0.1:8088/websocket/servlet/record");
            ws.onopen
= function ()
                console.log("Openened
connection to websocket");
            ;
            ws.onclose
= function ()
                 console.log("Close
connection to websocket");

            ws.onmessage
= function(e)
                audio.src
= URL.createObjectURL(e.data);



        </script>
</html>

recorder.js内容：

(function(window)

  varWORKER_PATH = 'js/recorderWorker.js';

  varRecorder = function(source,
cfg)
    varconfig = cfg || ;
    varbufferLen = config.bufferLen || 4096;
    this.context
= source.context;
    this.node
= this.context.createJavaScriptNode(bufferLen,
2, 2);
    varworker = newWorker(config.workerPath || WORKER_PATH);
    worker.postMessage(
      command:'init',
      config:

        sampleRate:this.context.sampleRate

    );
    varrecording = false,
      currCallback;

    this.node.onaudioprocess
= function(e)
      if(!recording) return;
      worker.postMessage(
        command:'record',
        buffer:
[
          e.inputBuffer.getChannelData(0),
          e.inputBuffer.getChannelData(1)
        ]
      );


    this.configure
= function(cfg)
      for(varprop incfg)
        if(cfg.hasOwnProperty(prop))
          config[prop]
= cfg[prop];




    this.record
= function()
      recording
= true;


    this.stop
= function()
      recording
= false;


    this.clear
= function()
      worker.postMessage(
command: 'clear');


    this.getBuffer
= function(cb)

      currCallback
= cb || config.callback;
      worker.postMessage(
command: 'getBuffer')


    this.exportWAV
= function(cb,
type)
      currCallback
= cb || config.callback;
      type
= type || config.type || 'audio/wav';
      if(!currCallback) thrownew Error('Callback
not set');
      worker.postMessage(
        command:'exportWAV',
        type:
type
      );


    worker.onmessage
= function(e)
      varblob = e.data;
      currCallback(blob);


    source.connect(this.node);
    this.node.connect(this.context.destination);   //this
should not be necessary
  ;

  Recorder.forceDownload
= function(blob,
filename)
    varurl = (window.URL || window.webkitURL).createObjectURL(blob);
    varlink = window.document.createElement('a');
    link.href
= url;
    link.download
= filename || 'output.wav';
    varclick = document.createEvent("Event");
    click.initEvent("click",true,true);
    link.dispatchEvent(click);


  window.Recorder
= Recorder;

)(window);

参考技术C 万一漏气了参考技术D 他这个是flash做的,也不是录音,只是记录你的按键,然后播放录音的时候就按顺序再来一遍追问

那如果我想用代码实现应该如何做

本回答被提问者采纳