audio 标签的用法/vue3 hook封装loading -每日记 20231219

多媒体标签业务中偶尔会碰到，记录一下audio标签的基本用法

如何获取本地音频文件的路径

这个问题不好解决，比如我用upload上传了一个文件，但是后端没返回给前端上传后文件地址的时候，如何播放本地的音频文件？

web端受限制不能直接通过文件系统获取某个文件的地址，在网上找到一个方法，通过获取<input type='file'/> dom元素的value来拿到地址，试了一下并不行，input没有value这个属性

因此后来还是后端返回了url，其实这也是标准流程
播放与暂停可以通过监听原生事件来获得播放进度 ended: 播放到媒体的结束位置，播放停止。 通过ref获取到audio实例，然后直接赋值(Vue3) audioDom.value.src = url 调用播放 audioPlayer.value.play(), 如果url时https/http等协议，会在获取到第一帧数据后开始播放，并边下边播需要暂停时，调用 audioPlayer.value.pause()
记得很久之前碰到过一次，dom元素隐藏不会自动播放的问题，我把audio标签 display：none了，可以调用play()去播放

vue3中引入了composition api，可以更好的封装hook

参考文章 hook!

什么是hook？
初以为是在一个函数的固定位置加入callback，使得该函数具有拓展性，比如在vue的生命周期钩子,理解的也不算有误，但被React 发扬光大的hook，在vue中准确来说是 利用组合式Api来封装和复用具有状态逻辑的函数
组合式Api？就是用setup/ref的写法来做到逻辑与视图状态 的更好封装, 既然提到了逻辑与视图状态，就离不开响应式框架，因此hook的实现是依赖于 React/Vue 的响应式基础的！
hook的示例
最有名的示例就是 VueUse，下面我们简单实现一个useMouse 的方法（hook一般都用Use开头，显得更专业~）

ts 复制代码

import { ref,onMounted,onUnmounted } from "vue";

export function useMouse(){
    const x = ref(0);
    const y = ref(0);
    function update(e:any){
        x.value = e.clientX;
        y.value = e.clientY;
    }
    onUnmounted(()=>{
        window.document.removeEventListener('mousemove',update);
    });
    onMounted(()=>{
        window.document.addEventListener('mousemove',update);
    });
    return {x,y}

}
// 使用时 直接解构出来 const {x，y} = useMouse(); x, y 绑定视图就可以了

可以看出，该函数和普通函数的区别在于x,y 是一个响应式变量！解构出来依旧可以追踪响应式！所以也印证了hool就是一个带有状态的函数，这里状态具体理解为，响应式变量。 3. 如何应用到业务中？什么时候需要抽离逻辑？先记录一下学来的封装技巧（一知半解待实用）

Hook 都是有返回值的，而且返回值一般都是响应式数据，方便外部使用，也可能public几个方法来修改数据
Hook 返回值可以用数组 return [x, y] 或对象 return {x, y} 数组可以在使用时对应位置重命名 const [ offsetX, offsetY ] = useMouse(); ，对象当然也可以解构重命名，对象返回具有更好的代码提示，二者可以替换
Hook 不要声明为 async ，需要处理异步时需要用then，确保返回值不是一个promise
如果返回值是一个深层的对象，需要用toRefs()来确保解构后的值依旧是响应式

ts 复制代码

function usePagination(){
    const pagination = reactive({
        current:0,
        size:0,
        total:0,
        ...
    })
    return {...toRefs(pagination)}
}
// 使用
const { current, total} = usePagination()