react-app-shell/activity/src/views/audio/audio-demo.js

react打包脚本和example, 这里的版本请忽略

import React, { Component } from 'react';
import { inject } from 'mobx-react';

import AudioPlayer from '../../components/audio/audio-player';
import styles from './styles.less';

/**
 * 测试音频
 */
@inject(({ audioStore }) => {
  return {
    // fn
    init: audioStore.init
  };
})
class AudioDemo extends Component {
  state = {
    dataSource: [
      'http://10.30.48.118:3100/audio/004.mp3',
      'http://10.30.48.118:3100/audio/005.mp3',
      'http://10.30.48.118:3100/audio/006.mp3',
      'http://10.30.48.118:3100/audio/007.mp3'
    ]
  };

  componentDidMount() {
    const { init } = this.props;
    init(this.state.dataSource);
  }

  componentWillUnmount() {
    // 清除定时器
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }

  render() {
    const { dataSource } = this.state;
    const list = dataSource.map((url) => {
      return (
        <div key={url} className={styles.audioBox}>
          <AudioPlayer url={url}>{url.replace('http://localhost:3100/', '')}</AudioPlayer>
        </div>
      );
    });

    return <div className={styles.wrapper}>{list}</div>;
  }
}

export default AudioDemo;