第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

使用 React 循環(huán)播放音頻

使用 React 循環(huán)播放音頻

斯蒂芬大帝 2022-12-22 11:52:48
我正在使用 React.js 并且我有一個(gè)返回音頻的 API:{   audios: [      "https://thisisanaudiolink",      "https://thisisanaudiolink",      "https://thisisanaudiolink"   ]}我不想使用 HTML 的音頻標(biāo)簽來播放,而是我的自定義按鈕。我怎樣才能做到這一點(diǎn)?到目前為止我已經(jīng)嘗試過:我試過這個(gè)循環(huán),但所有按鈕只播放最后一個(gè)音頻:import React, { useState, useRef } from "react";const Flashcards = () => {const [audios, setAudios] = useState([    "https://s3-sa-east-1.amazonaws.com/carneiro/public/card_audios/d7f2a0-5c89ef/4.wav",    "https://s3-sa-east-1.amazonaws.com/carneiro/public/card_audios/d7f2a0-5c89ef/12.wav",    "https://s3-sa-east-1.amazonaws.com/carneiro/public/card_audios/d7f2a0-5c89ef/1.wav"]);const audioRef = useRef();return (    <div>         {             audios.map(audio => (                <div key = {audio}>                    <audio                        controls = "controls"                        preload = "auto"                        autobuffer = "true"                        style = {{display: "none"}}                        ref = {audioRef}                    >                        <source src = {audio} />                    </audio>                    <button onClick = {() => audioRef.current.play()}>Play</button>                </div>                               ))         }    </div>   )}export default Flashcards;   
查看完整描述

1 回答

?
絕地?zé)o雙

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊

所有按鈕將播放最后一個(gè)音頻的原因是因?yàn)槟鷩L試將所有音頻與一個(gè)參考綁定,每個(gè)音頻參考相互覆蓋直到最后一個(gè)音頻。有幾種方法可以實(shí)現(xiàn)你想要的。最簡單的方法是創(chuàng)建單獨(dú)的組件來處理您的音頻播放按鈕。例如:


function AudioPlayer({ src }) {

  const audioRef = useRef();


  return (

    <div>

      <audio

        controls = "controls"

        preload = "auto"

        autobuffer = "true"

        style = {{display: "none"}}

        ref = {audioRef}

      >

       <source src={src} />

      </audio>


      <button onClick = {() => audioRef.current.play()}>Play</button>

    </div>

  );

}

然后你可以在你的audio.map


audios.map(audio => <AudioPlayer src={audio} />);


查看完整回答
反對 回復(fù) 2022-12-22
  • 1 回答
  • 0 關(guān)注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號