Audio

概述[音频]

<Audio /> 是音频组件，通过设置属性可以实现音频资源的下载与播放。

示例代码

import cooApp, { basicWidgets } from 'coolink'

const { Audio } = basicWidgets

export default class AudioDemo extends cooApp.Widget {
  render () {
    return {
        <Container>
            <AudioView
                ref={(e) => this.audioRef = e}
                playUrl={this.state.playUrl}
                autoPlay={this.state.autoPlay}
                loopPlay={this.state.loopPlay}
                onChange={this.onChangeAduio}
            >
            </AudioView>
        </Container>
    }
  }
}

组件属性

属性名	类型	说明	默认值
playUrl	string	音频播放链接	不为空
autoPlay	boolean	是否自动播放	true(不为 true 的话会加载音频失败？)
loopPlay	boolean	是否循环播放	false
onChange	Function	加载完成、播放进度等触发状态改变时执行	不为空

---

样例

export default class AudioDemo extends cooApp.Widget {
    state = {
        // 通用数据
        playUrl: 'http://img.sky.fs.skysrt.com/music/1_1.mp3',
        // 手机端数据
        autoPlay: true,
        loopPlay: false,
        duration: 0,
        position: 0,
        playStatus: 1
    }
    onChangeAduio = (res: any) => {
        // Util.log("lxw onChangeVideo", res.value.duration, res.value.position);
        if (res.value.duration) {
            this.setState({ duration: res.value.duration })
        }
        if (res.value.position) {
            this.setState({ position: res.value.position })
        }
    }
    render () {
        return {
            <Container>
                <AudioView
                    ref={(e) => this.audioRef = e}
                    playUrl={this.state.playUrl}
                    autoPlay={this.state.autoPlay}
                    loopPlay={this.state.loopPlay}
                    onChange={this.onChangeAduio}
                >
                </AudioView>
            </Container>
        }
    }
}

上述例子的效果图：