tml5中實現音頻的話可以用新增的屬性video,但是都會發現其自帶的控制進度條非常不好看,所有很多人都會自定義它們的控制進度條,今天就來做一下音頻控制進度條!
點擊播放后即可看到進度條的圓點在相對于的動起來
代碼
html結構:
css樣式:
javascript:
融界2024年7月3日消息,天眼查知識產權信息顯示,貴陽朗瑪信息技術股份有限公司申請一項名為“一種朗讀流式Markdown文本并跟蹤顯示朗讀進度的方法“,公開號CN202410692747.1,申請日期為2024年5月。
專利摘要顯示,本發明公開了一種朗讀流式Markdown文本并跟蹤顯示朗讀進度的方法,包括:對Markdown文本流式解析,提取完整塊級元素;將Markdown塊級元素文本轉換HTML文本,提取用于顯示的文字內容,構建第一序列,按順序串聯所述第一序列中的文字,得到語音合成需要的文字;根據得到的文字內容合成語音,獲得若干組語音合成文件及其元信息;根據所述第一序列和語音合成文件的元信息計算語音合成所用文字及發音字詞在HTML文本中的位置;播放合成語音并根據進度控制當前朗讀的段落及字詞高亮顯示。將該方法應用于實時生成的流式Markdown文本朗讀,解決了現有通用語音合成服務會將Markdown格式符號當做文字內容進行語音合成的問題,實現了Markdown文本快速渲染和根據朗讀進度高亮顯示朗讀段落和字詞的功能。
本文源自金融界
很多時候在訪問網頁的時候我們總是看到頁面在加載中,可以卻不知道要加載多久,無期限的等待總是讓人煩躁不安,所以我們希望能知道網頁加載的進度,這樣我們就能做到心中有數是否繼續等待頁面加載。這個功能我們可以依靠nprogress來實現,它是輕量級的進度條組件,使用簡便,可以很方便集成到應用中來。
直接在項目中執行安裝命令:npm install --save nprogress
NProgress.start() // 進度條開始 NProgress.set() // 將進度設置到具體的百分比位置,取值范圍是0到1.0 NProgress.inc() // 如果少量增加進度,進度將永遠不會得到100% NProgress.done() // 進度條結束消失 NProgress.configure() // 進度條參數配置
在main.js中引入nprogress插件和樣式,
import NProgress from 'nprogress' // nprogress插件 import 'nprogress/nprogress.css' // nprogress樣式
在NProgress.configure({})中我們可以對nprogress進行適當的配置,showSpinner 為 false(禁用進度環)、trickle 為 false(關閉進度條步進)、trickleRate (每次步進增長多少)、trickleSpeed (步進間隔,單位毫秒ms)、ease(動畫方向)、speed (動畫速度,單位毫秒ms)、minimum (最小百分比)等等。
NProgress.configure({ showSpinner: false }) //我這里只關閉進度環
在添加nprogress之前我們需要先了解Vuerouter的beforeEach與afterEach鉤子函數,這是在路由跳轉的時候對路由進行一些權限判斷或者其他操作時定義的處理函數,Vue.beforeEach是在跳轉之前執行,Vue.afterEach是在跳轉之后執行判斷的。
Vue.beforeEach(function(to,form,next){})函數有三個參數,Vue.afterEach(function(to,form))函數有兩個參數:
to:即將進入的路由對象
from:當前導航即將離開的路由對象
next:調用該方法,進入下一個鉤子函數,next(false):則中斷當前的導航。
在main.js中全局鉤子函數,在路由跳轉前用NProgress.start()標記下進度條開始,在路由跳轉后用NProgress.done()標記下結束,這樣在路由跳轉的時候就可以在頁面頂部看到一個progress bar進度條了。
import Vue from 'vue' import App from './App.vue' import router from '@/router/index.js' import store from './store' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/assets/icons/index.js' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Element) Vue.config.productionTip = false NProgress.configure({ showSpinner: false }) router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() }) new Vue({ router, store, render: h => h(App) }).$mount('#app')
如果你希望每次發送請求的時候也出現進度條的話可以在axios封裝中的路由攔截中添加nprogress,如何封裝axios可以參考Vue實戰037:axios二次封裝和使用。
// 請求攔截器(請求發出前處理一些請求) axios.interceptors.request.use( NProgress.start() }) // 響應攔截器(處理響應數據) axios.interceptors.response.use( NProgress.done() )
為了讓結構更滑清晰簡潔些,我們重新整理下代碼,即然nprogress主要是用在路由跳轉上,這里我將nprogress歸納放入router中,切記實例化router之后調用Vuerouter的beforeEach與afterEach鉤子函數生效。
import Vue from 'vue' import Router from 'vue-router' import routers from './routers' import NProgress from 'nprogress' import 'nprogress/nprogress.css' NProgress.configure({ showSpinner: false }) Vue.use(Router) const router = new Router({ mode: 'history', routes: routers }) export default router router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() })
在app.vue中添加如下樣式即可修改nprogress樣式,記得添加 !important來覆蓋原有樣式
#nprogress .bar { background: #66B1FF !important; // 自定義顏色 height: 20px !important; // 自定義高度 }
歡迎關注本人的公眾號:編程手札,文章也會在公眾號更新
*請認真填寫需求信息,我們會在24小時內與您取得聯系。