一個手寫的vue3錄音組件，支持錄音波紋、外觀自定義調節
該組件有兼容問題，MAC上不可用，需注意，這裏僅用來做記錄，如需音頻功能，可使用Recorder.js，方案很成熟。 組件如下： template div class="container" ref="container" canvas id="visualizer" ref="canvas"/canvas /div /template script setup lang=
昵稱 兔子先森
@Javascript
貢獻者369
粉絲0
貢獻者
@Javascript
動態 列表
前端Audio常用API
1、實例化new AudioContext(); 2、AudioContext.decodeAudioData解析音頻 3、創建AudioBufferSourceNode接口source 4、給AudioBufferSourceNode接口提供Buffer用以播放：source.buffer = buffer 5、播放結束後開啓下一輪播放： source.onended =
昵稱 兔子先森
前端recorder-core實時錄音並繪製波形，blob常規數據格式
npm：https://www.npmjs.com/package/recorder-core npm install recorder-core 這裏是常規錄音，每次結束後返回完整音頻blob，中間返回，並且結束後關閉音頻錄製並清空緩存 下面是一個vue3+ts+arco.design的案例，直接複製到項目中運行即可 template div class="snow-page"
昵稱 兔子先森
前端H5錄音實時幀回調-波形配置- Recorder.js
在H5端我們必須使用canvas作為容器來顯示波紋效果，這在官網上有詳細説明 這裏我定義了一個waveConfig變量用作波形的配置，具體的參數下文寫的很詳細，需要注意一點，compatibleCanvas參數綁定的是canvas容器，而且得是在canvas掛載後才能綁定。 // 創建音頻可視化圖形繪製對象 waveConfig.compatibleCanvas = recw
昵稱 兔子先森
PC瀏覽器端-PCM錄音+實時幀回調+流式上傳-Recorderjs
看到這裏的時候一定要理解並運行上文的《前端H5錄音實時幀回調-波形配置- Recorder.js》，這樣對Recorder有個概念。 1、通過onProcess回調可實現錄音的實時處理，onProcess的buffers參數內容為pcm數組（16位 LE小端模式 Little Endian），能直接流式的將數據進行上傳； 2、onProcess內的buffers參數為所有的PCM集合，
昵稱 兔子先森
PC瀏覽器端-MP3錄音+實時幀回調+流式上傳-Recorderjs
看到這裏的時候一定要理解並運行上文的《前端recorder-core實時錄音並繪製波形，blob常規數據格式》，這樣對Recorder有個概念。 在創建錄音對象的時候有一個takeoffEncodeChunk回調，該回調為實時編碼環境，會接管編碼器輸出。 當編碼器實時編碼出一塊有效的二進制音頻數據時實時回調此方法，也就是説每次獲取到有效的二進制音頻數據takeoffEncodeChun
昵稱 兔子先森
unaipp內使用pinia以及持久化緩存
vue3版本的uniapp內置pinia，無需額外引入，有了pinia後就不需要App.vue內的globalData了，pinia還是響應式的，更好、更強大 main.js內配置 import App from './App' // #ifndef VUE3 import Vue from 'vue' import './uni.promisify.adaptor' Vue.co
昵稱 兔子先森
uniapp微信小程序AI對話SSE流式輸出
微信小程序版本，主要針對AI對話的流式輸出，這裏主要有兩個要點 **1、如何流式渲染 2、如何建立SSE連接** 我們先從看得見的渲染開始着手，能渲染出來後再建立SSE做流式輸出 流式渲染 這裏使用uniapp插件市場的：zero-markdown-view 插件市場搜索直接下載導入到項目裏就可以用了 頁面使用： zero-markdown-view :theme-c
昵稱 兔子先森
uniapp自動滾動到底，上滑取消置底-錨點滾動
主要通過scroll-view組件來實現，比手動js獲取高度、判斷啥的更方便，而且官方支持 滾動到底 實現思路，通過錨點滾動實現，官方支持 view id="chat-main" scroll-view class="chat-main-inner" :lower-threshold="15" :scroll-into-view="targetId" scroll-y="t
昵稱 兔子先森
uniapp微信小程序流式錄音-PCM
uniapp在微信小程序中使用Record.js 先安裝核心依賴 npm install recorder-core 然後插件市場下載插件 頁面結構，我們需要一個canvas元素來承載波形的繪製，canvas需要設置大小，下面的代碼可以直接複製使用 template view class="recorder-box" canvas type
昵稱 兔子先森
VueZone-H5開發模板的一些常用功能
官網：https://vue-zone.github.io/docs/ github：https://github.com/vue-zone/vue3-vant-mobile 這是一個開源的vue3+vite的H5模板，多端設備兼容方式為 px - vw 和 rem 已接入過項目，親測好用，沒有過多配置，拉代碼啓動就能用了。 你可以把它當成一個已經搭好的架子，你只需要往裏面
昵稱 兔子先森
uni.connectSocket與@microsoft/signalr連接
之前做web頁面的時候，前後端用的@microsoft/signalr庫做長連接，現在微信小程序不支持signalr庫的直接使用，uniapp微信小程序的websocket長連接只能用uni.connectSocket，所以我們要用uni.connectSocket實現與signalr庫的長連接。 頁面結構 view button @click="onLink"啓動連接/bu
昵稱 兔子先森
uni.connectSocket真機調試報錯open fail:_code:20,_msg:Invalid HTTP
在微信開發者工具上uni.connectSocket的連接是正常的，一旦到真機預覽就連接報錯了，不管是真機預覽還是體驗版真機都會報錯。 真機報錯如下：open fail:_code:20,_msg:Invalid HTTP 最後在查找各種資料發現websocket的url不能包含特殊字符，必須轉碼才可以 比如我下面在url上拼接了一個token，這個token可能包含特殊字符（
昵稱 兔子先森
前端封裝一個流式音頻自動播放的類
這個類會根據websocket返回的base64音頻數據自動緩存播放，你可以修改緩衝音頻時長，可以播放和暫停 import { base64ToArrayBuffer } from '@/utils/AudioTools'; class AudioPlay { // AudioContext audioContext: AudioContext | any = null; // Au
昵稱 兔子先森
封裝uniapp微信小程序流式語音播放類
uniapp微信小程序端的websocket返回的base64音頻數據自動緩存播放，你可以修改緩衝隊列數，可以播放和暫停 class AudioPlay { constructor() { // createInnerAudioContext this.audioContext = uni.createInnerAudioContext();
昵稱 兔子先森
以React+Vite為例實現web項目版本發佈後，通知用户刷新頁面獲取最新資源
需求技術選型 1. 純前端實現——前端輪詢方案 原理：前端定時（如每一分鐘）發送請求（如請求version.json文件），對比本地存儲的版本號與服務器返回的版本號，若不一致則提示更新。 優點：實現簡單（無需後端複雜邏輯，僅需一個靜態版本文件），兼容性極好（所有瀏覽器支持）。 缺點：實時性差有延遲（依賴輪詢間隔）。 適用場景：小型項目、對實時性要求低（如非高頻更新的工具類網站）、快速迭代
昵稱 水冗水孚
JetBrains官宣，又一個IDE可以免費用了！
提到 JetBrains 這家公司，相信搞開發的同學應該都不陌生。 該公司盛產各種編程 IDE 和開發工具，雖然 2000 年才成立，到現在卻已經發布了超 30 款世界頂級的編程軟件，同時也收穫了來自全球範圍內開發者和用户的青睞。 眾所周知，從去年開始到今年 JetBrains 曾經搞過一系列大動作，那就是： 陸續官宣了 WebStorm、Rider 以及 CLion 這幾款強大的 IDE 對
昵稱 CodeSheep
大家有沒有發現一個奇特現象：你能在一個公司工作 12 年以上，無論你多忠誠多賣力，一旦公司賺的少了，那你就成了“眼中釘肉中刺”
最近在網上刷到一個職場帖子，原文差不多是這樣： “大家有沒有發現一個奇特現象：你很忠誠，能在一個公司工作 12 年以上，無論你態度多好多賣力，一旦公司賺的少了，那你就成了“眼中釘肉中刺”。 他們不會顧及你的任何貢獻，把你視作包袱，視作成本，然後不顧廉恥和情面，要麼降薪，要麼轉崗，狠一點不發年終獎，更狠一點暴力優化，故意耽誤你的時間成本……” 説實話，剛刷到這個話題時，看完心裏一陣揪揪。
昵稱 CodeSheep