进度条的时间不会变?

来源：12-9 暂停以及进度条展示播放时间（下）

5769727

2021-05-30

第一次点击,播放显示的是00:00/00:00,值不会变化,一直是00:00/00:00,暂停播放,然后点击另一首时显示的是上一首的进度,如00:03/05:33,然后也一直是这个值
可能是哪里的代码错了呢

写回答

5回答

今朝

2021-05-30

已采纳

大概率是你的组件写的有问题，可以贴一下你的组件代码吗

5769727

非常感谢！

2021-05-31

共1条回复

爱学习啦啦啦啦

2021-08-29

同学，我和你一样的问题，请问你是怎么解决的呢

5769727

发现你自己提问完了,编辑...

2021-08-31

共1条回复

5769727

提问者

2021-05-31

test

今朝

2021-05-30

大概率是你的组件写的有问题，可以贴一下你的组件代码吗

5769727

提问者

2021-05-30

player.ts
import {Effect, EffectsCommandMap, EffectWithType, Model} from 'dva-core-ts';
import {Reducer} from 'redux';
import axios from 'axios';
import {play, init, pause, getCurrentTime, getDuration} from '@/config/sound';

const SHOW_URL = '/mock/11/bear/show';

export interface PlayerModelState {
  id: string;
  soundUrl: string;
  playState: string;
  currentTime: number;
  duration: number;
}

export interface PlayerModel extends Model {
  namespace: 'player';
  state: PlayerModelState;
  reducers: {
    setState: Reducer<PlayerModelState>;
  };
  effects: {
    fetchShow: Effect;
    play: Effect;
    pause: Effect;
    watcherCurrentTime: EffectWithType;

  };
}

const initialState: PlayerModelState = {
  id: '',
  soundUrl: '',
  playState: '',
  currentTime: 0,
  duration: 0,
};

const delay = (timeout: number) =>
  new Promise(resolve => setTimeout(resolve, timeout));

function* currentTime({call, put}: EffectsCommandMap) {
  while (true) {
    yield call(delay, 1000);
    const time: number = yield call(getCurrentTime);
    yield put({
      type: 'setState',
      payload: {
        currentTime: time,
      },
    });
  }
}

const playerModel: PlayerModel = {
  namespace: 'player',
  state: initialState,
  reducers: {
    setState(state, {payload}) {
      return {
        ...state,
        ...payload,
      };
    },
  },
  effects: {
    *fetchShow({payload}, {call, put}) {
      const {data} = yield call(axios.get, SHOW_URL, {
        params: {id: payload.id},
      });
      console.log('-----fetchshow', data);
      yield call(init, data.soundUrl);
      yield put({
        type: 'setState',
        payload: {
          id: payload.id,
          soundUrl: data.soundUrl,
          duration: getDuration(),
        },
      });

      console.log('初始播发器成功');
      yield put({
        type: 'play',
      });
    },
    *play({payload}, {call, put}) {
      yield put({
        type: 'setState',
        payload: {
          playState: 'playing',
        },
      });
      console.log('开始播放');
      try {
        yield call(play);
      } catch (e) {
        console.log('播放音频失败', e);
      }

      yield put({
        type: 'setState',
        payload: {
          playState: 'paused',
        },
      });
    },
    *pause({payload}, {call, put}) {
      yield call(pause);
      yield put({
        type: 'setState',
        payload: {
          playState: 'paused',
        },
      });
    },
    watcherCurrentTime: [
      function* (sagaEffects) {
        const {call, take, race} = sagaEffects;
        while (true) {
          yield take('play');
          yield race([call(currentTime, sagaEffects), take('pause')]);
        }
      },
      {type: 'watcher'},
    ],
  },
};

export default playerModel;

sound.ts
// 获取当前播放时间
const getCurrentTime = () => {
  return new Promise(resolve => {
    if (sound && sound.isLoaded()) {
      sound.getCurrentTime(resolve);
    } else {
      resolve(0);
    }
  });
};

// 获取音频时长
const getDuration = () => {
  if (sound) {
    return sound.getDuration();
  }
  return 0;
};