原生js写仿微信语音发送

最新推荐文章于 2023-12-15 10:50:45 发布

Flower！important

最新推荐文章于 2023-12-15 10:50:45 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/sanflow/article/details/107783957

版权

1，首先看下主要部分

if (navigator.mediaDevices.getUserMedia) { //navigator.mediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道//
            var chunks = [];
            const constraints = {
                audio: true         //这里打开我么的音频
            };
            navigator.mediaDevices.getUserMedia(constraints).then(
                MediaStream => {
                    const mediaRecorder = new MediaRecorder(MediaStream);//构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象
                    Btn.onmousedown = function (ev) {       //当鼠标按下的时候进行录制
                        mediaRecorder.start();
                        ev.target.nextElementSibling.style.display = 'block'
                        ev.target.style.background = '#1ec8f3'
                    }
                    Btn.onmouseup = function (ev) {
                        mediaRecorder.stop();       //当鼠标松开的时候进行录制
                        ev.target.nextElementSibling.style.display = 'none'
                        ev.target.style.background = '#1ef36f'
                    }
                    mediaRecorder.ondataavailable = e => {  //响应运行代码Blob数据被提供使用
                        chunks.push(e.data);
                    };
                    mediaRecorder.onstop = e => {   //将收集好的音频数据创建成Blob 对象，然后 通过 URL.createObjectURL 创建成 HTML 中 <audio> 标签可使用的资源链接。
                        var blob = new Blob(chunks, {
                            type: "audio/ogg; codecs=opus"
                        });
                        chunks = [];        //其中，在使用完收到的音频数据后
                        var audioURL = window.URL.createObjectURL(blob);
                        chatArr.push(audioURL)      //这里将收到的音频数据放到一个数组中,为了在下面循环出来
                        updata(chatArr)         //执行这个方法将我们的audio循环添加出来
                    };
                },
                () => {
                    console.error("授权失败！")
                }
            );
            
        } else {
            console.error("浏览器不支持 getUserMedia");
        }

2，来看下我们循环添加标签的方法

        function updata(arr) {
            let str = ``
            for(var i = 0; i < arr.length; i++){
                let temp = document.createElement('audio')
                let tempDiv = document.createElement('div')
                tempDiv.className = 'show-right-item'
                temp.className = 'my-audio'
                temp.setAttribute('src', arr[i])
                temp.setAttribute('controls', true)
                tempDiv.appendChild(temp)
                document.getElementById('chatList').appendChild(tempDiv)
                chatArr = []
            }
            style(right)
            function style(val){
                for(var i = 0; i < val.children.length; i++){
                    right.children[i].onclick = function(ev){
                        console.log(ev.target.children[0].paused)
                        ev.target.children[0].paused ? ev.target.children[0].play() : ev.target.children[0].pause()
                    }
                }
            }
        }

3，全部代码看拉走效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .infrom{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .infrom-center{
            width: 100%;
            height: 100%;
            background: #222;
            border-radius: 5px;
        }
        .show{
            width: 100%;
            height: 70%;
        }
        .send{
            width: 100%;
            height: 30%;
            background: #333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .show-right{
            width: 200px;
            height: 70%;
            position: absolute;
            right: 0px;
            overflow-y: auto;
        }
        .show-right::-webkit-scrollbar {
        width : 10px;
        height: 1px;
        }
        .show-right::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #535353;
        }
        .show-right::-webkit-scrollbar-track {
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #ededed;
        }
        .show-right-item{
            width: 140px;
            height: 40px;
            margin-top: 20px;
            border-radius: 10px;
            margin-right: 30px;
            background: #f90;
            display: block;
        }
        .sendClick{
            width: 130px;
            height: 40px;
            background: #1ef36f;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
            font-size: 15px;
            cursor: pointer;
            user-select: none;
        }
        .my-audio{
            width: 130px;
            height: 40px;
            display: none;
        }
        .img{
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.123);
            position: absolute;
            top: calc(50% - 150px);
            left: calc(50% - 75px);
            display: none;
            border-radius: 10px;
            text-align: center;
            line-height: 150px;
            color: #fff;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="infrom">
        <div class="infrom-center">
            <div class="show">
                <div class="show-right" id="chatList">
                </div>
            </div>
            <div class="send">
                <div class="sendClick" id="divone">
                    点击说话
                </div>
                <div class="img">
                    正在说话中......
                </div>
            </div>
        </div>
    </div>
    <script>
        const Btn = document.getElementById("divone");
        const audione = document.querySelector('.my-audio')
        const right = document.querySelector('.show-right')
        let chatArr = []
        function updata(arr) {
            let str = ``
            for(var i = 0; i < arr.length; i++){
                let temp = document.createElement('audio')
                let tempDiv = document.createElement('div')
                tempDiv.className = 'show-right-item'
                temp.className = 'my-audio'
                temp.setAttribute('src', arr[i])
                temp.setAttribute('controls', true)
                tempDiv.appendChild(temp)
                document.getElementById('chatList').appendChild(tempDiv)
                chatArr = []
            }
            style(right)
            function style(val){
                for(var i = 0; i < val.children.length; i++){
                    right.children[i].onclick = function(ev){
                        console.log(ev.target.children[0].paused)   //下面时判断下播放状态，paused正在播放返回false
                        ev.target.children[0].paused ? ev.target.children[0].play() : ev.target.children[0].pause()
                    }
                }
            }
        }
        if (navigator.mediaDevices.getUserMedia) { //navigator.mediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道//
            var chunks = [];
            const constraints = {
                audio: true         //这里打开我么的音频
            };
            navigator.mediaDevices.getUserMedia(constraints).then(
                MediaStream => {
                    const mediaRecorder = new MediaRecorder(MediaStream);//构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象
                    Btn.onmousedown = function (ev) {       //当鼠标按下的时候进行录制
                        mediaRecorder.start();
                        ev.target.nextElementSibling.style.display = 'block'
                        ev.target.style.background = '#1ec8f3'
                    }
                    Btn.onmouseup = function (ev) {
                        mediaRecorder.stop();       //当鼠标松开的时候进行录制
                        ev.target.nextElementSibling.style.display = 'none'
                        ev.target.style.background = '#1ef36f'
                    }
                    mediaRecorder.ondataavailable = e => {  //响应运行代码Blob数据被提供使用
                        chunks.push(e.data);
                    };
                    mediaRecorder.onstop = e => {   //将收集好的音频数据创建成Blob 对象，然后 通过 URL.createObjectURL 创建成 HTML 中 <audio> 标签可使用的资源链接。
                        var blob = new Blob(chunks, {
                            type: "audio/ogg; codecs=opus"
                        });
                        chunks = [];        //其中，在使用完收到的音频数据后
                        var audioURL = window.URL.createObjectURL(blob);
                        chatArr.push(audioURL)      //这里将收到的音频数据放到一个数组中,为了在下面循环出来
                        updata(chatArr)         //执行这个方法将我们的audio循环出来
                    };
                },
                () => {
                    console.error("授权失败！")
                }
            );
            
        } else {
            console.error("浏览器不支持 getUserMedia");
        }
    </script>
</body>
</html>

Flower！important

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
原生js写仿微信语音发送

1，首先看下主要部分if (navigator.mediaDevices.getUserMedia) { //navigator.mediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道// var chunks = []; const constraints = { audio: true //这里打开
复制链接

扫一扫