audio的timeupdate间隔设置51单片机每1秒亮一次

来源：蜘蛛抓取(WebSpider) 时间：2022-11-12 07:23 标签： 51单片机每1秒亮一次

字节跳动小程序、飞书小程序

注意： 微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，推荐使用API方式而不是组件方式来播放音频。API见 替代。

如果需要带ui的样式，可以自己做，也可以在插件市场搜索相关

audio 组件的唯一标识符
默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
当开始/继续播放时触发play事件
当暂停播放时触发 pause 事件
当播放到末尾时触发 ended 事件

本篇文章小编给大家分享一下Vue3+TS实现语音播放组件代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

该功能将使用vue3 + TS来实现语音播放组件，使用什么技术不重要，重要的是看懂了核心逻辑后，通过原生js、react、vue2等都可以轻松实现

所涉及到重要点有以下几个：

（1）进度条的实现：拖拽进度条、点击进度条

（2）操作audio语音播放：通过js操作audio媒体

（3）播放进度与进度条紧密关联：播放的进度改变时，进度条也随之改变；进度条改变时，播放的进度也随之改变

第一步：点击拖拽进度条

父元素设置灰色背景色，圆圈进行position定位，使用left百分比，同时黑色进度条的width也是百分比，这样圆圈的left值是多少，黑色进度条的width就是多少。

先说拖拽圆圈，圆圈上绑定mousedown事件，根据事件e.target确定圆圈、黑色进度条、灰色父元素，三者的element。同时知道了圆圈当前的left值，比如30%，还知道了当前鼠标mousedown时，事件e.pageX，即鼠标mousedown时，距离页面左边的水平值，因为对比后续鼠标移动时，触发的mousemove事件的e.pageX可以判断移动了多少。同时还要知道灰色背景的父元素的width。因为鼠标移动的距离 / width 要赋值给圆圈的left。知道移动了%多少。

然后，监听document文档的mousemove，注意鼠标是可以在整个文档上移动的，不过圆圈可不能在灰色父元素之外。移动的e.pageX - 鼠标mousedown时的e.pageX 就是鼠标水平移动的距离。超出最大值时，圆圈left设置为100%，小于最小值时，left设置为0%，总之left要在0%~100%之间，才能保证圆圈不超出到外面去。这样圆圈就可以随着鼠标移动了，同时黑色进度条的width值与圆圈的left值一样，所以黑色进度条的width也随着鼠标移动。

再说说点击父元素时，圆圈到指定位置

点击事件在灰色父元素上进行监听，注意e.target可不一定是灰色父元素，e.target表示鼠标点击到哪个元素，随后click冒泡到父元素上的。同样点击事件的e.pageX 可以确定鼠标点击的水平位置，转换为%值，设置圆圈的left值和黑色进度条的width值。

以上就可以实现进度条功能了。

获取audio的element，audioElement上面有play、pause等方法，还有currentTime播放进度时间，以及duration总时长。所以说HTML5的audio标签，上面的方法和属性还是非常直观的，这也正是web发展的一个特点，某个新的特性的产生，功能会很明了。

首先当媒体的第一帧加载完成时，我们就获取audio的element：（audio自身的loadeddata事件） 

// 当媒体音频第一帧加载完成时

其次，对播放中进行监听：（audio的timeupdate事件）

最后，播放完成进行监听：（audio的ended事件）

如果对audio标签不是很熟悉，请参考文档

上述操作还是很简单的，audio上的属性、方法、事件都是非常简单明了且实用的。

第三步：进度条和播放进度关联

通过audio当前的播放时间 / 总时长，得到的%值，赋值给圆圈的left和黑色进度条的width。

通过圆圈的left值的% * 总时长，得到audio的当前播放时间。（audio的currentTime属性直接赋值，语音播放就会跳转到指定的时间进行播放，比如 1，就会从1秒的位置开始） 




                            

                                                    

                                

  

    

      

        

          audio获取当前播放时间
        

        

          audio 获取媒体总时长
        

        

          在canplay（浏览器可以开始播放该音视频）钩子函数回调中访问duration属性可获得（注：在dom挂载完直接获取duration会返回NaN）
        

        

          

            
              

                
              

            
          

        

        

          

            
              

                
              

            
          

        

        

          

            
              

                
              

            
          

        

        

          

            
              

                
              

            
          

        

        

          

            
              

                
              

            
          

        

        

          

            
              

                
              

            
          

        

      

    

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 51单片机每1秒亮一次 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐