uni.createInnerAudioContext音频开发实战从播放控制到duration获取的深度解析在移动应用开发中音频功能已经成为提升用户体验的重要组成部分。无论是社交应用中的语音消息、教育类App的课程播放还是娱乐应用中的背景音乐流畅稳定的音频播放能力都是开发者必须掌握的核心技能。uni-app作为跨平台开发框架通过uni.createInnerAudioContextAPI为开发者提供了强大的音频处理能力。然而在实际开发过程中音频时长(duration)获取异常、播放状态管理等问题常常困扰着开发者。本文将带您深入探索这一API的完整使用场景特别针对duration获取这一痛点问题提供经过实战检验的解决方案。1. 理解uni.createInnerAudioContext基础架构uni.createInnerAudioContext是uni-app提供的音频上下文创建方法它返回一个音频对象实例支持多种音频格式的播放控制。与Web Audio API不同这个接口专为移动端优化能够更好地处理设备兼容性和性能问题。创建基础音频实例非常简单const innerAudioContext uni.createInnerAudioContext(); innerAudioContext.src https://example.com/audio.mp3;这个基础实例支持以下核心属性src音频资源地址支持本地路径和网络URLautoplay是否自动播放默认为falseloop是否循环播放默认为falsevolume播放音量范围0-1音频对象还提供了一系列控制方法方法名作用描述使用场景play()开始播放音频用户点击播放按钮时调用pause()暂停当前播放的音频暂停/恢复功能实现stop()停止播放音频完全停止音频播放seek()跳转到指定位置播放实现进度条拖动功能destroy()销毁当前实例组件卸载时资源释放在实际项目中我们通常会将这些功能封装成可复用的音频组件。下面是一个典型的音频组件初始化代码export default { data() { return { audioInstance: null, isPlaying: false, currentTime: 0, duration: 0 } }, created() { this.initAudio() }, methods: { initAudio() { this.audioInstance uni.createInnerAudioContext() this.bindAudioEvents() }, bindAudioEvents() { this.audioInstance.onPlay(() { this.isPlaying true }) this.audioInstance.onPause(() { this.isPlaying false }) this.audioInstance.onTimeUpdate(() { this.currentTime this.audioInstance.currentTime }) this.audioInstance.onEnded(() { this.isPlaying false this.currentTime 0 }) } } }2. 音频播放全生命周期管理一个健壮的音频播放功能需要完整处理音频从加载到销毁的整个生命周期。以下是音频播放的典型状态流程初始化阶段创建实例并设置src加载阶段网络请求音频资源解码音频数据就绪阶段音频可以播放onCanplay触发播放阶段用户交互触发播放时间更新onTimeUpdate暂停/恢复用户暂停后可能恢复播放结束阶段自然播放结束或用户主动停止销毁阶段释放音频资源针对这个生命周期我们需要合理设置事件监听// 创建音频上下文 const audio uni.createInnerAudioContext() // 设置必要的事件监听 audio.onCanplay(() { console.log(音频可以播放了) // 这里可以获取duration但可能为0 }) audio.onPlay(() { console.log(开始播放) }) audio.onError((err) { console.error(播放错误:, err) // 错误处理逻辑 }) audio.onTimeUpdate(() { // 更新UI显示当前播放进度 this.currentTime audio.currentTime }) audio.onEnded(() { console.log(播放结束) // 重置播放状态 })在实际开发中有几个关键点需要注意音频预加载对于需要立即播放的场景可以提前创建实例并设置src让音频在后台加载内存管理不再使用的音频实例应该调用destroy()释放资源多实例控制同时播放多个音频时需要注意设备性能限制提示在iOS平台上音频播放需要用户交互触发autoplay可能不会生效。最佳实践是在用户点击事件中调用play()方法。3. duration获取异常的原因分析与解决方案duration获取异常是开发者最常遇到的问题之一。当我们在onCanplay事件中直接访问duration属性时经常会得到0这个无效值。这种现象主要由以下几个原因导致音频元数据未完全加载虽然音频可以开始播放但完整的元数据包括duration可能还未解析完成跨域资源限制当音频文件来自不同域且未正确配置CORS时可能无法获取完整信息编码格式问题某些音频编码格式可能导致元数据解析延迟平台差异不同平台iOS/Android对音频元数据的处理方式存在差异针对这些问题我们开发了一个可靠的duration获取方案function getAudioDuration(audioContext, maxRetry 10, interval 100) { return new Promise((resolve, reject) { let retryCount 0 const checkDuration () { retryCount if (audioContext.duration 0) { resolve(audioContext.duration) } else if (retryCount maxRetry) { reject(new Error(无法获取音频时长)) } else { setTimeout(checkDuration, interval) } } checkDuration() }) } // 使用示例 audioContext.onCanplay(async () { try { const duration await getAudioDuration(audioContext) console.log(获取到的音频时长:, duration) } catch (err) { console.error(获取时长失败:, err) // 降级处理 } })这个方案通过轮询方式检查duration值直到获取到有效值或达到最大重试次数。在实际项目中我们可以根据网络状况调整重试间隔和次数。对于特殊场景我们还可以采用以下优化策略本地缓存duration对于同一音频文件可以将获取到的duration存储在本地下次直接使用服务端预计算在音频上传时由服务端计算duration并随文件信息一起返回格式转换将音频转换为标准格式如MP3确保元数据可靠性4. 高级功能实现与性能优化掌握了基础播放和duration获取后我们可以进一步实现更丰富的音频功能和性能优化。4.1 音频可视化通过分析音频数据我们可以创建波形图或频谱图// 创建音频分析器 const audioContext uni.createInnerAudioContext() const analyser audioContext.createAnalyser() analyser.fftSize 256 // 获取频率数据 const bufferLength analyser.frequencyBinCount const dataArray new Uint8Array(bufferLength) function updateVisualization() { requestAnimationFrame(updateVisualization) analyser.getByteFrequencyData(dataArray) // 使用dataArray绘制可视化效果 } audioContext.onPlay(() { updateVisualization() })4.2 多音频混合播放对于需要同时播放多个音效的场景class AudioPool { constructor(size 5) { this.pool Array(size).fill().map(() uni.createInnerAudioContext()) this.currentIndex 0 } play(src) { const audio this.pool[this.currentIndex] audio.stop() audio.src src audio.play() this.currentIndex (this.currentIndex 1) % this.pool.length } } // 使用示例 const soundEffects new AudioPool() soundEffects.play(/sounds/click.mp3)4.3 性能优化技巧音频预加载提前创建实例并设置src但不自动播放内存管理及时销毁不再使用的音频实例格式选择优先使用压缩率高的格式如AAC音量渐变调整音量时使用渐变效果避免突兀// 音量渐变实现 function fadeVolume(audio, target, duration 1000) { const startVolume audio.volume const startTime Date.now() const updateVolume () { const elapsed Date.now() - startTime const progress Math.min(elapsed / duration, 1) audio.volume startVolume (target - startVolume) * progress if (progress 1) { requestAnimationFrame(updateVolume) } } updateVolume() }4.4 跨平台兼容性处理不同平台上的音频表现可能存在差异我们需要针对性地处理平台特性iOS表现Android表现解决方案自动播放需要用户交互触发可以自动播放统一在用户交互后播放后台播放默认暂停可以继续播放配置后台播放权限静音模式遵循系统静音设置可能忽略静音设置检测系统静音状态并提示用户缓冲策略缓冲较小可能预加载更多监听缓冲事件显示加载状态实现一个跨平台兼容的播放控制器class CrossPlatformPlayer { constructor() { this.audio uni.createInnerAudioContext() this.isIOS uni.getSystemInfoSync().platform ios this.setupEventListeners() } setupEventListeners() { this.audio.onError((err) { console.error(播放错误:, err) // 统一错误处理 }) if (this.isIOS) { // iOS特定事件处理 document.addEventListener(touchstart, this.handleFirstInteraction, { once: true }) } } handleFirstInteraction () { // iOS上首次交互后可以播放音频 this.audio.play().catch(err { console.error(播放失败:, err) }) } play(src) { this.audio.src src if (!this.isIOS) { this.audio.play() } // iOS需要等待用户交互 } }5. 实战案例音乐播放器完整实现结合前面介绍的知识点我们来实现一个完整的音乐播放器组件。这个播放器将包含以下功能播放/暂停控制进度条显示与拖动音量控制播放列表管理跨平台兼容性处理5.1 播放器核心逻辑// audio-player.js export class AudioPlayer { constructor(options {}) { this.audio uni.createInnerAudioContext() this.playlist options.playlist || [] this.currentIndex 0 this.volume options.volume || 0.7 this.isPlaying false this.initEventListeners() } initEventListeners() { this.audio.onPlay(() { this.isPlaying true this.dispatchEvent(play) }) this.audio.onPause(() { this.isPlaying false this.dispatchEvent(pause) }) this.audio.onTimeUpdate(() { this.dispatchEvent(timeupdate, { currentTime: this.audio.currentTime, duration: this.audio.duration }) }) this.audio.onEnded(() { this.next() }) this.audio.onError((err) { this.dispatchEvent(error, err) }) } play(index) { if (typeof index ! undefined) { this.currentIndex index } const track this.playlist[this.currentIndex] if (!track) return this.audio.src track.src this.audio.play() } pause() { this.audio.pause() } togglePlay() { if (this.isPlaying) { this.pause() } else { this.play() } } next() { this.currentIndex (this.currentIndex 1) % this.playlist.length this.play() } prev() { this.currentIndex (this.currentIndex - 1 this.playlist.length) % this.playlist.length this.play() } seek(time) { this.audio.seek(time) } setVolume(volume) { this.volume Math.max(0, Math.min(1, volume)) this.audio.volume this.volume } destroy() { this.audio.destroy() } }5.2 UI组件实现template view classaudio-player view classtrack-info text classtitle{{ currentTrack.title }}/text text classartist{{ currentTrack.artist }}/text /view slider :valueprogress changehandleSeek min0 :maxduration activeColor#4a90e2 / view classtime-display text{{ formatTime(currentTime) }}/text text{{ formatTime(duration) }}/text /view view classcontrols button tapprev classcontrol-btn上一首/button button taptogglePlay classcontrol-btn {{ isPlaying ? 暂停 : 播放 }} /button button tapnext classcontrol-btn下一首/button /view view classvolume-control text音量:/text slider :valuevolume * 100 changehandleVolumeChange min0 max100 / /view /view /template script import { AudioPlayer } from ./audio-player export default { data() { return { player: null, currentTime: 0, duration: 0, isPlaying: false, volume: 0.7, playlist: [ { title: 示例音乐1, artist: 艺术家1, src: https://example.com/audio1.mp3 }, // 更多曲目... ] } }, computed: { currentTrack() { return this.playlist[this.player?.currentIndex || 0] || {} }, progress() { return this.duration 0 ? (this.currentTime / this.duration) * 100 : 0 } }, created() { this.initPlayer() }, methods: { initPlayer() { this.player new AudioPlayer({ playlist: this.playlist, volume: this.volume }) this.player.addEventListener(timeupdate, ({ currentTime, duration }) { this.currentTime currentTime this.duration duration }) this.player.addEventListener(play, () { this.isPlaying true }) this.player.addEventListener(pause, () { this.isPlaying false }) }, togglePlay() { this.player.togglePlay() }, next() { this.player.next() }, prev() { this.player.prev() }, handleSeek(e) { const time e.detail.value this.player.seek(time) }, handleVolumeChange(e) { const volume e.detail.value / 100 this.volume volume this.player.setVolume(volume) }, formatTime(seconds) { if (isNaN(seconds)) return 00:00 const mins Math.floor(seconds / 60) const secs Math.floor(seconds % 60) return ${mins.toString().padStart(2, 0)}:${secs.toString().padStart(2, 0)} } }, beforeDestroy() { this.player.destroy() } } /script style .audio-player { padding: 20px; background-color: #f5f5f5; border-radius: 8px; } .track-info { margin-bottom: 15px; } .title { font-size: 18px; font-weight: bold; display: block; } .artist { font-size: 14px; color: #666; } .time-display { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #666; } .controls { display: flex; justify-content: center; margin: 20px 0; } .control-btn { margin: 0 10px; padding: 8px 16px; background-color: #4a90e2; color: white; border-radius: 4px; } .volume-control { margin-top: 20px; display: flex; align-items: center; } .volume-control text { margin-right: 10px; } /style5.3 高级功能扩展在实际产品中我们还可以为播放器添加更多高级功能歌词同步显示解析LRC格式歌词并与播放进度同步音效调节实现均衡器功能调节不同频段的声音睡眠定时设置播放器在指定时间后自动停止播放列表管理允许用户添加、删除和排序播放列表下载管理支持离线下载音频文件// 歌词同步功能示例 class LyricsPlayer { constructor(audioPlayer) { this.audioPlayer audioPlayer this.lyrics [] this.currentLine -1 audioPlayer.addEventListener(timeupdate, this.updateLyrics.bind(this)) } parseLrc(lrcText) { const lines lrcText.split(\n) this.lyrics lines.map(line { const matches line.match(/^\[(\d{2}):(\d{2})\.(\d{2})\](.*)/) if (!matches) return null const [, min, sec, centisec, text] matches const time (min * 60) (sec) (centisec / 100) return { time, text } }).filter(Boolean) this.lyrics.sort((a, b) a.time - b.time) } updateLyrics({ currentTime }) { if (!this.lyrics.length) return let lineIndex -1 for (let i 0; i this.lyrics.length; i) { if (this.lyrics[i].time currentTime) { lineIndex i } else { break } } if (lineIndex ! this.currentLine) { this.currentLine lineIndex this.highlightLine(lineIndex) } } highlightLine(index) { // 更新UI高亮当前歌词行 console.log(当前歌词:, this.lyrics[index]?.text || ) } } // 使用示例 const player new AudioPlayer() const lyricsPlayer new LyricsPlayer(player) lyricsPlayer.parseLrc( [00:00.00] 这是第一行歌词 [00:05.00] 这是第二行歌词 [00:10.00] 这是第三行歌词 )
uni.createInnerAudioContext音频播放全攻略：从基础使用到duration获取异常处理
uni.createInnerAudioContext音频开发实战从播放控制到duration获取的深度解析在移动应用开发中音频功能已经成为提升用户体验的重要组成部分。无论是社交应用中的语音消息、教育类App的课程播放还是娱乐应用中的背景音乐流畅稳定的音频播放能力都是开发者必须掌握的核心技能。uni-app作为跨平台开发框架通过uni.createInnerAudioContextAPI为开发者提供了强大的音频处理能力。然而在实际开发过程中音频时长(duration)获取异常、播放状态管理等问题常常困扰着开发者。本文将带您深入探索这一API的完整使用场景特别针对duration获取这一痛点问题提供经过实战检验的解决方案。1. 理解uni.createInnerAudioContext基础架构uni.createInnerAudioContext是uni-app提供的音频上下文创建方法它返回一个音频对象实例支持多种音频格式的播放控制。与Web Audio API不同这个接口专为移动端优化能够更好地处理设备兼容性和性能问题。创建基础音频实例非常简单const innerAudioContext uni.createInnerAudioContext(); innerAudioContext.src https://example.com/audio.mp3;这个基础实例支持以下核心属性src音频资源地址支持本地路径和网络URLautoplay是否自动播放默认为falseloop是否循环播放默认为falsevolume播放音量范围0-1音频对象还提供了一系列控制方法方法名作用描述使用场景play()开始播放音频用户点击播放按钮时调用pause()暂停当前播放的音频暂停/恢复功能实现stop()停止播放音频完全停止音频播放seek()跳转到指定位置播放实现进度条拖动功能destroy()销毁当前实例组件卸载时资源释放在实际项目中我们通常会将这些功能封装成可复用的音频组件。下面是一个典型的音频组件初始化代码export default { data() { return { audioInstance: null, isPlaying: false, currentTime: 0, duration: 0 } }, created() { this.initAudio() }, methods: { initAudio() { this.audioInstance uni.createInnerAudioContext() this.bindAudioEvents() }, bindAudioEvents() { this.audioInstance.onPlay(() { this.isPlaying true }) this.audioInstance.onPause(() { this.isPlaying false }) this.audioInstance.onTimeUpdate(() { this.currentTime this.audioInstance.currentTime }) this.audioInstance.onEnded(() { this.isPlaying false this.currentTime 0 }) } } }2. 音频播放全生命周期管理一个健壮的音频播放功能需要完整处理音频从加载到销毁的整个生命周期。以下是音频播放的典型状态流程初始化阶段创建实例并设置src加载阶段网络请求音频资源解码音频数据就绪阶段音频可以播放onCanplay触发播放阶段用户交互触发播放时间更新onTimeUpdate暂停/恢复用户暂停后可能恢复播放结束阶段自然播放结束或用户主动停止销毁阶段释放音频资源针对这个生命周期我们需要合理设置事件监听// 创建音频上下文 const audio uni.createInnerAudioContext() // 设置必要的事件监听 audio.onCanplay(() { console.log(音频可以播放了) // 这里可以获取duration但可能为0 }) audio.onPlay(() { console.log(开始播放) }) audio.onError((err) { console.error(播放错误:, err) // 错误处理逻辑 }) audio.onTimeUpdate(() { // 更新UI显示当前播放进度 this.currentTime audio.currentTime }) audio.onEnded(() { console.log(播放结束) // 重置播放状态 })在实际开发中有几个关键点需要注意音频预加载对于需要立即播放的场景可以提前创建实例并设置src让音频在后台加载内存管理不再使用的音频实例应该调用destroy()释放资源多实例控制同时播放多个音频时需要注意设备性能限制提示在iOS平台上音频播放需要用户交互触发autoplay可能不会生效。最佳实践是在用户点击事件中调用play()方法。3. duration获取异常的原因分析与解决方案duration获取异常是开发者最常遇到的问题之一。当我们在onCanplay事件中直接访问duration属性时经常会得到0这个无效值。这种现象主要由以下几个原因导致音频元数据未完全加载虽然音频可以开始播放但完整的元数据包括duration可能还未解析完成跨域资源限制当音频文件来自不同域且未正确配置CORS时可能无法获取完整信息编码格式问题某些音频编码格式可能导致元数据解析延迟平台差异不同平台iOS/Android对音频元数据的处理方式存在差异针对这些问题我们开发了一个可靠的duration获取方案function getAudioDuration(audioContext, maxRetry 10, interval 100) { return new Promise((resolve, reject) { let retryCount 0 const checkDuration () { retryCount if (audioContext.duration 0) { resolve(audioContext.duration) } else if (retryCount maxRetry) { reject(new Error(无法获取音频时长)) } else { setTimeout(checkDuration, interval) } } checkDuration() }) } // 使用示例 audioContext.onCanplay(async () { try { const duration await getAudioDuration(audioContext) console.log(获取到的音频时长:, duration) } catch (err) { console.error(获取时长失败:, err) // 降级处理 } })这个方案通过轮询方式检查duration值直到获取到有效值或达到最大重试次数。在实际项目中我们可以根据网络状况调整重试间隔和次数。对于特殊场景我们还可以采用以下优化策略本地缓存duration对于同一音频文件可以将获取到的duration存储在本地下次直接使用服务端预计算在音频上传时由服务端计算duration并随文件信息一起返回格式转换将音频转换为标准格式如MP3确保元数据可靠性4. 高级功能实现与性能优化掌握了基础播放和duration获取后我们可以进一步实现更丰富的音频功能和性能优化。4.1 音频可视化通过分析音频数据我们可以创建波形图或频谱图// 创建音频分析器 const audioContext uni.createInnerAudioContext() const analyser audioContext.createAnalyser() analyser.fftSize 256 // 获取频率数据 const bufferLength analyser.frequencyBinCount const dataArray new Uint8Array(bufferLength) function updateVisualization() { requestAnimationFrame(updateVisualization) analyser.getByteFrequencyData(dataArray) // 使用dataArray绘制可视化效果 } audioContext.onPlay(() { updateVisualization() })4.2 多音频混合播放对于需要同时播放多个音效的场景class AudioPool { constructor(size 5) { this.pool Array(size).fill().map(() uni.createInnerAudioContext()) this.currentIndex 0 } play(src) { const audio this.pool[this.currentIndex] audio.stop() audio.src src audio.play() this.currentIndex (this.currentIndex 1) % this.pool.length } } // 使用示例 const soundEffects new AudioPool() soundEffects.play(/sounds/click.mp3)4.3 性能优化技巧音频预加载提前创建实例并设置src但不自动播放内存管理及时销毁不再使用的音频实例格式选择优先使用压缩率高的格式如AAC音量渐变调整音量时使用渐变效果避免突兀// 音量渐变实现 function fadeVolume(audio, target, duration 1000) { const startVolume audio.volume const startTime Date.now() const updateVolume () { const elapsed Date.now() - startTime const progress Math.min(elapsed / duration, 1) audio.volume startVolume (target - startVolume) * progress if (progress 1) { requestAnimationFrame(updateVolume) } } updateVolume() }4.4 跨平台兼容性处理不同平台上的音频表现可能存在差异我们需要针对性地处理平台特性iOS表现Android表现解决方案自动播放需要用户交互触发可以自动播放统一在用户交互后播放后台播放默认暂停可以继续播放配置后台播放权限静音模式遵循系统静音设置可能忽略静音设置检测系统静音状态并提示用户缓冲策略缓冲较小可能预加载更多监听缓冲事件显示加载状态实现一个跨平台兼容的播放控制器class CrossPlatformPlayer { constructor() { this.audio uni.createInnerAudioContext() this.isIOS uni.getSystemInfoSync().platform ios this.setupEventListeners() } setupEventListeners() { this.audio.onError((err) { console.error(播放错误:, err) // 统一错误处理 }) if (this.isIOS) { // iOS特定事件处理 document.addEventListener(touchstart, this.handleFirstInteraction, { once: true }) } } handleFirstInteraction () { // iOS上首次交互后可以播放音频 this.audio.play().catch(err { console.error(播放失败:, err) }) } play(src) { this.audio.src src if (!this.isIOS) { this.audio.play() } // iOS需要等待用户交互 } }5. 实战案例音乐播放器完整实现结合前面介绍的知识点我们来实现一个完整的音乐播放器组件。这个播放器将包含以下功能播放/暂停控制进度条显示与拖动音量控制播放列表管理跨平台兼容性处理5.1 播放器核心逻辑// audio-player.js export class AudioPlayer { constructor(options {}) { this.audio uni.createInnerAudioContext() this.playlist options.playlist || [] this.currentIndex 0 this.volume options.volume || 0.7 this.isPlaying false this.initEventListeners() } initEventListeners() { this.audio.onPlay(() { this.isPlaying true this.dispatchEvent(play) }) this.audio.onPause(() { this.isPlaying false this.dispatchEvent(pause) }) this.audio.onTimeUpdate(() { this.dispatchEvent(timeupdate, { currentTime: this.audio.currentTime, duration: this.audio.duration }) }) this.audio.onEnded(() { this.next() }) this.audio.onError((err) { this.dispatchEvent(error, err) }) } play(index) { if (typeof index ! undefined) { this.currentIndex index } const track this.playlist[this.currentIndex] if (!track) return this.audio.src track.src this.audio.play() } pause() { this.audio.pause() } togglePlay() { if (this.isPlaying) { this.pause() } else { this.play() } } next() { this.currentIndex (this.currentIndex 1) % this.playlist.length this.play() } prev() { this.currentIndex (this.currentIndex - 1 this.playlist.length) % this.playlist.length this.play() } seek(time) { this.audio.seek(time) } setVolume(volume) { this.volume Math.max(0, Math.min(1, volume)) this.audio.volume this.volume } destroy() { this.audio.destroy() } }5.2 UI组件实现template view classaudio-player view classtrack-info text classtitle{{ currentTrack.title }}/text text classartist{{ currentTrack.artist }}/text /view slider :valueprogress changehandleSeek min0 :maxduration activeColor#4a90e2 / view classtime-display text{{ formatTime(currentTime) }}/text text{{ formatTime(duration) }}/text /view view classcontrols button tapprev classcontrol-btn上一首/button button taptogglePlay classcontrol-btn {{ isPlaying ? 暂停 : 播放 }} /button button tapnext classcontrol-btn下一首/button /view view classvolume-control text音量:/text slider :valuevolume * 100 changehandleVolumeChange min0 max100 / /view /view /template script import { AudioPlayer } from ./audio-player export default { data() { return { player: null, currentTime: 0, duration: 0, isPlaying: false, volume: 0.7, playlist: [ { title: 示例音乐1, artist: 艺术家1, src: https://example.com/audio1.mp3 }, // 更多曲目... ] } }, computed: { currentTrack() { return this.playlist[this.player?.currentIndex || 0] || {} }, progress() { return this.duration 0 ? (this.currentTime / this.duration) * 100 : 0 } }, created() { this.initPlayer() }, methods: { initPlayer() { this.player new AudioPlayer({ playlist: this.playlist, volume: this.volume }) this.player.addEventListener(timeupdate, ({ currentTime, duration }) { this.currentTime currentTime this.duration duration }) this.player.addEventListener(play, () { this.isPlaying true }) this.player.addEventListener(pause, () { this.isPlaying false }) }, togglePlay() { this.player.togglePlay() }, next() { this.player.next() }, prev() { this.player.prev() }, handleSeek(e) { const time e.detail.value this.player.seek(time) }, handleVolumeChange(e) { const volume e.detail.value / 100 this.volume volume this.player.setVolume(volume) }, formatTime(seconds) { if (isNaN(seconds)) return 00:00 const mins Math.floor(seconds / 60) const secs Math.floor(seconds % 60) return ${mins.toString().padStart(2, 0)}:${secs.toString().padStart(2, 0)} } }, beforeDestroy() { this.player.destroy() } } /script style .audio-player { padding: 20px; background-color: #f5f5f5; border-radius: 8px; } .track-info { margin-bottom: 15px; } .title { font-size: 18px; font-weight: bold; display: block; } .artist { font-size: 14px; color: #666; } .time-display { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #666; } .controls { display: flex; justify-content: center; margin: 20px 0; } .control-btn { margin: 0 10px; padding: 8px 16px; background-color: #4a90e2; color: white; border-radius: 4px; } .volume-control { margin-top: 20px; display: flex; align-items: center; } .volume-control text { margin-right: 10px; } /style5.3 高级功能扩展在实际产品中我们还可以为播放器添加更多高级功能歌词同步显示解析LRC格式歌词并与播放进度同步音效调节实现均衡器功能调节不同频段的声音睡眠定时设置播放器在指定时间后自动停止播放列表管理允许用户添加、删除和排序播放列表下载管理支持离线下载音频文件// 歌词同步功能示例 class LyricsPlayer { constructor(audioPlayer) { this.audioPlayer audioPlayer this.lyrics [] this.currentLine -1 audioPlayer.addEventListener(timeupdate, this.updateLyrics.bind(this)) } parseLrc(lrcText) { const lines lrcText.split(\n) this.lyrics lines.map(line { const matches line.match(/^\[(\d{2}):(\d{2})\.(\d{2})\](.*)/) if (!matches) return null const [, min, sec, centisec, text] matches const time (min * 60) (sec) (centisec / 100) return { time, text } }).filter(Boolean) this.lyrics.sort((a, b) a.time - b.time) } updateLyrics({ currentTime }) { if (!this.lyrics.length) return let lineIndex -1 for (let i 0; i this.lyrics.length; i) { if (this.lyrics[i].time currentTime) { lineIndex i } else { break } } if (lineIndex ! this.currentLine) { this.currentLine lineIndex this.highlightLine(lineIndex) } } highlightLine(index) { // 更新UI高亮当前歌词行 console.log(当前歌词:, this.lyrics[index]?.text || ) } } // 使用示例 const player new AudioPlayer() const lyricsPlayer new LyricsPlayer(player) lyricsPlayer.parseLrc( [00:00.00] 这是第一行歌词 [00:05.00] 这是第二行歌词 [00:10.00] 这是第三行歌词 )
