基於react的audio元件

2022-08-05 15:39:17 字數 1476 閱讀 3220

樣式請自己定義哦~

需要其他功能請自行新增!

// 元件呼叫

stalled當瀏覽器嘗試獲取**資料,但資料不可用時

suspend當瀏覽器刻意不獲取**資料時

volumechange當音量已更改時

this.controlaudio('alltime')}

ontimeupdate=

>

您的瀏覽器不支援 audio 標籤。

this.controlaudio(isplay ? 'pause' : 'play')}

/>

this.controlaudio('changecurrenttime',value)}

/>

this.controlaudio('muted')}

/>

this.controlaudio('changevolume',value)}

value=

/>

constructor(props) 

} millisecondtodate(time) :$:$`

// }

return `$:$`}`

} controlaudio(type,value) = this.props

const audio = document.getelementbyid(`audio$`)

switch(type) )

break

case 'play':

audio.play()

this.setstate()

break

case 'pause':

audio.pause()

this.setstate()

break

case 'muted':

this.setstate()

audio.muted = !audio.muted

break

case 'changecurrenttime':

this.setstate()

audio.currenttime = value

if(value == audio.duration) )

}break

case 'getcurrenttime':

this.setstate()

if(audio.currenttime == audio.duration) )

}break

case 'changevolume':

audio.volume = value / 100

this.setstate()

break

}}

react的redux

store 儲存資料的地方,可以當做是一個容器,整個應用只有一個store。 redux提供createstore這個函式,用來生成store。 注 一定要引入暴露的store檔案 action是一個物件。其中type屬性是必須的,表示action的名稱。其他屬性可以自由設定。 改變state的唯一...

React和Redux的連線react redux

之前僅通過redux文件來了解react redux,在一段時間的實踐後準備翻一翻源 ,順便做些相關的總結。我看的 的npm版本為v4 0 0,也就是說使用的react版本是0 14 x。 react redux提供兩個關鍵模組 provider和connect。 這個是provider的使用示例 ...

React筆記02 React中的元件

一個網頁可以被拆分成若干小部分,每個部分都可以稱為元件,即元件是網頁中的一部分。元件中還可以有多個元件。 一個元件的構成 import react from react render 實際專案中用下方這種簡化寫法 import react from react render 語法拆分理解 impor...