博客 RSS 訂閱

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 一個手寫的vue3錄音組件，支持錄音波紋、外觀自定義調節

該組件有兼容問題，MAC上不可用，需注意，這裏僅用來做記錄，如需音頻功能，可使用Recorder.js，方案很成熟。 組件如下： template div class="container" ref="container" canvas id="visualizer" ref="canvas"/canvas /div /template script setup lang=

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端Audio常用API

1、實例化new AudioContext(); 2、AudioContext.decodeAudioData解析音頻 3、創建AudioBufferSourceNode接口source 4、給AudioBufferSourceNode接口提供Buffer用以播放：source.buffer = buffer 5、播放結束後開啓下一輪播放： source.onended =

react , vue.js , HTML , 前端 , Javascript

收藏 評論

shuirongshui 頭像

水冗水孚 - React中使用map+area標籤實現img圖片特定區域標記功能（可用Photoshop精準拾取對應點位）

需求描述 前段時間，工作中筆者接到了一個有意思的需求 就是給圖片做特定的交互效果 圖片中有幾個特殊區域 當用户hover特殊區域的時候，高亮 點擊特殊區域的時候，彈框給到一些提示信息 效果圖和線上演示 線上效果演示地址：https://ashuai.site/reactExamples/imagePoint 技術方案選擇 這個需求如果圖片中的特定區域都是矩形 我們完全可以直接

react , jquery插件 , Css , jquery , HTML

收藏 評論

yqyx36 頭像

雲輕雨細 - SEO合規指南：正確的鏈接屬性設置！

本文系轉載，轉載鏈接： SEO合規指南：鏈接中的sponsored+nofollow組合！ 前言 在SEO領域，搜索引擎對鏈接的使用有明確規則。如果你沒有正確標註付費鏈接、沒分清sponsored與nofollow的用法，就可能會被搜索引擎判定為“操縱排名”，導致網站降權甚至被移除索引。 今天就給大家分享一下 sponsored 屬性與 nofollow 屬性的用法，合規避坑。 一、sponsor

seo , HTML

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端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"

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端H5錄音實時幀回調-波形配置- Recorder.js

在H5端我們必須使用canvas作為容器來顯示波紋效果，這在官網上有詳細説明 這裏我定義了一個waveConfig變量用作波形的配置，具體的參數下文寫的很詳細，需要注意一點，compatibleCanvas參數綁定的是canvas容器，而且得是在canvas掛載後才能綁定。 // 創建音頻可視化圖形繪製對象 waveConfig.compatibleCanvas = recw

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - PC瀏覽器端-PCM錄音+實時幀回調+流式上傳-Recorderjs

看到這裏的時候一定要理解並運行上文的《前端H5錄音實時幀回調-波形配置- Recorder.js》，這樣對Recorder有個概念。 1、通過onProcess回調可實現錄音的實時處理，onProcess的buffers參數內容為pcm數組（16位 LE小端模式 Little Endian），能直接流式的將數據進行上傳； 2、onProcess內的buffers參數為所有的PCM集合，

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - PC瀏覽器端-MP3錄音+實時幀回調+流式上傳-Recorderjs

看到這裏的時候一定要理解並運行上文的《前端recorder-core實時錄音並繪製波形，blob常規數據格式》，這樣對Recorder有個概念。 在創建錄音對象的時候有一個takeoffEncodeChunk回調，該回調為實時編碼環境，會接管編碼器輸出。 當編碼器實時編碼出一塊有效的二進制音頻數據時實時回調此方法，也就是説每次獲取到有效的二進制音頻數據takeoffEncodeChun

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 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

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp微信小程序AI對話SSE流式輸出

微信小程序版本，主要針對AI對話的流式輸出，這裏主要有兩個要點 **1、如何流式渲染 2、如何建立SSE連接** 我們先從看得見的渲染開始着手，能渲染出來後再建立SSE做流式輸出 流式渲染 這裏使用uniapp插件市場的：zero-markdown-view 插件市場搜索直接下載導入到項目裏就可以用了 頁面使用： zero-markdown-view :theme-c

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp自動滾動到底，上滑取消置底-錨點滾動

主要通過scroll-view組件來實現，比手動js獲取高度、判斷啥的更方便，而且官方支持 滾動到底 實現思路，通過錨點滾動實現，官方支持 view id="chat-main" scroll-view class="chat-main-inner" :lower-threshold="15" :scroll-into-view="targetId" scroll-y="t

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp微信小程序流式錄音-PCM

uniapp在微信小程序中使用Record.js 先安裝核心依賴 npm install recorder-core 然後插件市場下載插件 頁面結構，我們需要一個canvas元素來承載波形的繪製，canvas需要設置大小，下面的代碼可以直接複製使用 template view class="recorder-box" canvas type

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - VueZone-H5開發模板的一些常用功能

官網：https://vue-zone.github.io/docs/ github：https://github.com/vue-zone/vue3-vant-mobile 這是一個開源的vue3+vite的H5模板，多端設備兼容方式為 px - vw 和 rem 已接入過項目，親測好用，沒有過多配置，拉代碼啓動就能用了。 你可以把它當成一個已經搭好的架子，你只需要往裏面

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uni.connectSocket與@microsoft/signalr連接

之前做web頁面的時候，前後端用的@microsoft/signalr庫做長連接，現在微信小程序不支持signalr庫的直接使用，uniapp微信小程序的websocket長連接只能用uni.connectSocket，所以我們要用uni.connectSocket實現與signalr庫的長連接。 頁面結構 view button @click="onLink"啓動連接/bu

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uni.connectSocket真機調試報錯open fail:_code:20,_msg:Invalid HTTP

在微信開發者工具上uni.connectSocket的連接是正常的，一旦到真機預覽就連接報錯了，不管是真機預覽還是體驗版真機都會報錯。 真機報錯如下：open fail:_code:20,_msg:Invalid HTTP 最後在查找各種資料發現websocket的url不能包含特殊字符，必須轉碼才可以 比如我下面在url上拼接了一個token，這個token可能包含特殊字符（

react , vue.js , HTML , 前端 , Javascript

收藏 評論

dawanzi_6278b06ec111c 頭像

大丸子 - 使用 Python 將 PowerPoint 轉換為 HTML 網頁

在工作中，我們經常需要將 PowerPoint 演示文稿分享給同事或者嵌入到網站中。然而，如果直接發送 PPT 文件，不僅需要接收方安裝 PowerPoint，還可能存在兼容性問題。將演示文稿導出為 HTML 網頁是一種很好的解決方案，它可以直接在瀏覽器中查看，既方便分享，又便於在網站或培訓平台上展示。 手動將 PPT 導出為 HTML 文件可能比較繁瑣，尤其是需要保持原有排版和樣式時。藉助 Fr

ppt , powerpoint , 轉換 , HTML , Python

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端封裝一個流式音頻自動播放的類

這個類會根據websocket返回的base64音頻數據自動緩存播放，你可以修改緩衝音頻時長，可以播放和暫停 import { base64ToArrayBuffer } from '@/utils/AudioTools'; class AudioPlay { // AudioContext audioContext: AudioContext | any = null; // Au

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 封裝uniapp微信小程序流式語音播放類

uniapp微信小程序端的websocket返回的base64音頻數據自動緩存播放，你可以修改緩衝隊列數，可以播放和暫停 class AudioPlay { constructor() { // createInnerAudioContext this.audioContext = uni.createInnerAudioContext();

react , vue.js , HTML , 前端 , Javascript

收藏 評論

sysin 頭像

sysin - NetScaler Console 13.1 Build 58.21 發佈 - 集中管理 NetScaler

NetScaler Console 13.1 Build 58.21 (ESXi, Hyper-V, KVM, Xen) Formerly known as Citrix ADM - 集中管理 NetScaler 請訪問原文鏈接：https://sysin.org/blog/netscaler-console-13/ 查看最新版。原創作品，轉載請保留出處。 作者主頁：sysin.org NetS

HTTP

收藏 評論

yansudehai_ty9er 頭像

yansudehai_ty9er - MCP 協議：為什麼 Streamable HTTP 是最佳選擇？

MCP（Model Context Protocol）協議是一個用於 AI 模型和工具之間通信的標準協議。隨着 AI 應用變得越來越複雜並被廣泛部署，原有的通信機制面臨着一系列挑戰。近期 MCP 倉庫的 PR #206【1】 引入了一個全新的 Streamable HTTP 傳輸層替代原有的 HTTP+SSE 傳輸層。本文將詳細分析該協議的技術細節和實際優勢。 要點速覽 Streamable

協議 , HTTP , 性能

收藏 評論

cricis 頭像

好文收藏 - 性能比拼: HTTP/2 vs. HTTP/3

本內容是對知名性能評測博主 Anton Putra HTTP/2 vs. HTTP/3 performance benchmark 內容的翻譯與整理, 有適當刪減, 相關指標和結論以原作為準 在本內容中，我們將比較 HTTP/2 和 HTTP/3 協議。 我們將使用 Terraform 和 Ansible 在 Google Cloud Platform (GCP) 中創建基礎設施，然後從源代碼配置

HTTP , HTTPS

收藏 評論

seact 頭像

Seact - nginx 進行 http 端口轉發 header 修改 (for SillyTavern)

故事背景 通過 cloudflare tunnel 訪問vps服務器上的 sillytavern 使用 nginx 端口轉發, 限制為僅允許 tunnel 發起的本地訪問, 並修改請求header除去 安裝 nginx sudo apt-get install nginx 檢查服務狀態 systemctl status nginx 修改配置 修改 /etc/nginx/nginx.conf

VPS , HTTP , Nginx

收藏 評論

xingguangshanshan 頭像

星光閃閃 - GCMS調諧報告中發現半峯寬超過0.65的調整方法

質譜儀GCMS的調諧報告中發現半峯寬超過0.65，可以按照以下步驟進行調整： 檢查儀器狀態 真空狀態：確保分子渦輪泵的轉速達到百分之100，真空系統正常運行。如果真空狀態不佳，可能會影響峯寬。 離子源和四極杆温度：確認離子源温度為230℃，四極杆温度為150℃，並確保這些温度穩定。 清潔離子源和四極杆 離子源：如果離子源受到污染，可能會導致峯寬增加。可以考慮進行離子源的清潔。 四極杆

數據挖掘 , HTTP , 數據庫 , 人工智能 , 深度學習

收藏 評論

yuhuashi_584a46acea21f 頭像

雨花石 - 前端瀏覽器緩存

一、瀏覽器緩存簡介 1、瀏覽器通過緩存服務器返回的資源（針對靜態資源和get請求），減少傳輸壓力，提高訪問速度。 2、那麼緩存的目標應該是：資源可以被緩存 + 保證不使用過期的資源 + 服務器資源部分更新的時候不能導致新舊文件內容不一致。所以可以結合實際情況，設置適當的緩存策略。 3、瀏覽器無緩存的過程： 瀏覽器請求 --- 無緩存 --- 請求WEB服務器 --- 請求響應 -

HTTP , HTTPS , 安全 , 前端

收藏 評論