由于 mac 和 window 的样式不一致导致~~
1
| // 组件调用 <audio src="{src地址}" id="{srcID}" />
|
audio 属性
src 歌曲的路径preload 是否在页面加载后立即加载（设置 autoplay 后无效）controls 显示 audio 自带的播放控件loop 音频循环autoplay 音频加载后自动播放currentTime 音频当前播放时间duration 音频总长度ended 音频是否结束muted 音频静音为 truevolume 当前音频音量readyState 音频当前的就绪状态
audio 事件
abort 当音频/视频的加载已放弃时canplay 当浏览器可以播放音频/视频时canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时durationchange 当音频/视频的时长已更改时emptied 当目前的播放列表为空时ended 当目前的播放列表已结束时error 当在音频/视频加载期间发生错误时loadeddata 当浏览器已加载音频/视频的当前帧时loadedmetadata 当浏览器已加载音频/视频的元数据时loadstart 当浏览器开始查找音频/视频时pause 当音频/视频已暂停时play 当音频/视频已开始或不再暂停时playing 当音频/视频在已因缓冲而暂停或停止后已就绪时progress 当浏览器正在下载音频/视频时ratechange 当音频/视频的播放速度已更改时seeked 当用户已移动/跳跃到音频/视频中的新位置时seeking 当用户开始移动/跳跃到音频/视频中的新位置时stalled 当浏览器尝试获取媒体数据，但数据不可用时suspend 当浏览器刻意不获取媒体数据时timeupdate 当目前的播放位置已更改时volumechange 当音量已更改时waiting 当视频由于需要缓冲下一帧而停止
组件结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <div className="audioBox">
<audio
id={`audio${id}`}
src={src}
preload={true}
onCanPlay={() => this.controlAudio('allTime')}
onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}
>
您的浏览器不支持 audio 标签。
</audio>
<i
className={isPlay ? 'pause' : 'play'}
onClick={() => this.controlAudio(isPlay ? 'pause' : 'play')}
/>
<span className="current">
{this.millisecondToDate(currentTime)+'/'+this.millisecondToDate(allTime)}
</span>
<input
type="range"
className="time"
step="0.01"
max={allTime}
value={currentTime}
onChange={(value) => this.controlAudio('changeCurrentTime',value)}
/>
<i
className={isMuted ? 'mute' : 'nomute'}
onClick={() => this.controlAudio('muted')}
/>
<input
type="range"
className="volume"
onChange={(value) => this.controlAudio('changeVolume',value)}
value={isMuted ? 0 : volume}
/>
</div>
|
组件 javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| constructor(props) {
super(props)
this.state = {
isPlay: false,
isMuted: false,
volume: 100,
allTime: 0,
currentTime: 0
}
}
millisecondToDate(time) {
const second = Math.floor(time % 60)
let minite = Math.floor(time / 60)
return `${minite}:${second >= 10 ? second : `0${second}`}`
}
controlAudio(type,value) {
const { id,src } = this.props
const audio = document.getElementById(`audio${id}`)
switch(type) {
case 'allTime':
this.setState({
allTime: audio.duration
})
break
case 'play':
audio.play()
this.setState({
isPlay: true
})
break
case 'pause':
audio.pause()
this.setState({
isPlay: false
})
break
case 'muted':
this.setState({
isMuted: !audio.muted
})
audio.muted = !audio.muted
break
case 'changeCurrentTime':
this.setState({
currentTime: value
})
audio.currentTime = value
if(value == audio.duration) {
this.setState({
isPlay: false
})
}
break
case 'getCurrentTime':
this.setState({
currentTime: audio.currentTime
})
if(audio.currentTime == audio.duration) {
this.setState({
isPlay: false
})
}
break
case 'changeVolume':
audio.volume = value / 100
this.setState({
volume: value,
isMuted: !value
})
break
}
}
|