uni-app 美观的音频播放组件

在uni-app中创建一个美观的音频播放组件，可以通过结合HTML、CSS和JavaScript来实现。以下是一个简单的代码示例，它展示了如何创建一个基本的音频播放组件，并添加一些基本的样式以使其更加美观。

1. 创建组件文件

首先，在components目录下创建一个新的组件文件，例如AudioPlayer.vue。

<template>
  <view class="audio-player">
    <image :src="coverImage" class="cover-image" />
    <view class="controls">
      <button @click="togglePlay" class="play-button">
        <text>{{ isPlaying ? 'Pause' : 'Play' }}</text>
      </button>
      <slider v-model="currentTime" :min="0" :max="duration" @change="updateTime" class="progress-slider" disabled :value="currentTime / duration"/>
      <text class="time">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioContext: null,
      src: '',
      coverImage: '',
      currentTime: 0,
      duration: 0,
      isPlaying: false
    };
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    updateTime(e) {
      this.audioContext.currentTime = e.detail.value;
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    },
    initAudio(src) {
      this.audioContext = uni.createInnerAudioContext();
      this.audioContext.src = src;
      this.audioContext.onTimeUpdate(() => {
        this.currentTime = this.audioContext.currentTime;
        this.duration = this.audioContext.duration;
      });
    }
  },
  mounted() {
    this.initAudio(this.src);
  },
  props: {
    src: {
      type: String,
      required: true
    },
    coverImage: {
      type: String,
      default: ''
    }
  }
};
</script>

<style scoped>
.audio-player {
  width: 300px;
  position: relative;
}
.cover-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.play-button {
  background-color: #ff0000;
  color: white;
  border: none;
  padding: 10px;
  margin: 10px 0;
}
.progress-slider {
  width: 100%;
  margin: 10px 0;
}
.time {
  font-size: 14px;
}
</style>

2. 使用组件

在你的页面中引入并使用这个组件：

<template>
  <view>
    <AudioPlayer src="path/to/your/audio.mp3" coverImage="path/to/your/cover.jpg" />
  </view>
</template>

<script>
import AudioPlayer from '@/components/AudioPlayer.vue';

export default {
  components: {
    AudioPlayer
  }
};
</script>

这个示例展示了如何创建一个简单的音频播放组件，并通过样式使其看起来更美观。你可以根据需要进一步定制样式和功能。