agent

audioBook/pages/index copy.vue

@@ -0,0 +1,739 @@
+<template>
+  <view class="container">
+    <!-- 顶部标题栏 -->
+    <!-- 主要内容区域 -->
+    <!-- 文本显示区域 -->
+    <scroll-view
+      class="content"
+      :show-scrollbar="false"
+      enhanced
+      scroll-y
+      :scroll-top="scrollTop"
+      scroll-with-animation
+      :style="{ height: scrollViewHeight + 'px' }"
+    >
+      <view class="content-wrapper">
+        <view class="article-content">
+          <text
+            v-for="(char, index) in currentChapter.characters"
+            :key="index"
+            class="character"
+            :class="{ active: index === activeCharIndex }"
+          >
+            {{ char.Text }}
+          </text>
+        </view>
+      </view>
+    </scroll-view>
+    <!-- 底部控制栏 -->
+    <view class="controls">
+      <!-- 章节信息栏 -->
+      <view class="chapter-info-bar">
+        <text class="chapter-title">{{ currentChapter.title }}</text>
+        <text class="chapter-count">
+          {{ currentChapterIndex + 1 }}/{{ chapters.length }}
+        </text>
+      </view>
+
+      <!-- 进度条区域 -->
+      <view class="progress-section">
+        <text class="current-time">{{ formatTime(currentTime) }}</text>
+        <view class="progress-container">
+          <view class="progress-bar" @click="seek">
+            <view class="progress" :style="{ width: progress + '%' }"></view>
+            <view
+              class="progress-thumb"
+              :style="{ left: progress + '%' }"
+            ></view>
+          </view>
+        </view>
+        <text class="duration">{{ formatTime(duration) }}</text>
+      </view>
+
+      <!-- 控制按钮区域 -->
+      <view class="control-buttons">
+        <!-- 上一章按钮 -->
+        <button
+          class="control-btn prev-btn"
+          @click="prevChapter"
+          :disabled="currentChapterIndex === 0"
+        >
+          <text class="control-icon">⏮</text>
+        </button>
+
+        <!-- 播放/暂停按钮 -->
+        <button class="play-btn" @click="togglePlay">
+          <text class="play-icon">{{ playing ? "⏸️" : "▶️" }}</text>
+        </button>
+
+        <!-- 下一章按钮 -->
+        <button
+          class="control-btn next-btn"
+          @click="nextChapter"
+          :disabled="currentChapterIndex === chapters.length - 1"
+        >
+          <text class="control-icon">⏭</text>
+        </button>
+      </view>
+    </view>
+
+    <AudioPlayer
+      ref="audioPlayer"
+      :src="currentChapter.audioUrl"
+      @timeupdate="onTimeUpdate"
+      @ended="onEnded"
+    ></AudioPlayer>
+  </view>
+</template>
+
+<script>
+// 由于uniapp不支持直接使用audio元素，我们使用innerAudioContext
+import AudioPlayer from "../components/AudioPlayer.vue";
+
+export default {
+  components: {
+    AudioPlayer,
+  },
+  data() {
+    return {
+      chapters: [
+        {
+          title: "第一章：人工智能的崛起",
+          audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3",
+          // 字符级别的时间同步数据
+          characters: [
+            {"BeginIndex": 0, "BeginTime": 0, "EndIndex": 1, "EndTime": 500, "Phoneme": "ren2", "Text": "人"},
+            {"BeginIndex": 1, "BeginTime": 500, "EndIndex": 2, "EndTime": 1000, "Phoneme": "gong1", "Text": "工"},
+            {"BeginIndex": 2, "BeginTime": 1000, "EndIndex": 3, "EndTime": 1500, "Phoneme": "zhi4", "Text": "智"},
+            {"BeginIndex": 3, "BeginTime": 1500, "EndIndex": 4, "EndTime": 2000, "Phoneme": "neng2", "Text": "能"},
+            {"BeginIndex": 4, "BeginTime": 2000, "EndIndex": 5, "EndTime": 2200, "Phoneme": "", "Text": "的"},
+            {"BeginIndex": 5, "BeginTime": 2200, "EndIndex": 6, "EndTime": 2700, "Phoneme": "fa1", "Text": "发"},
+            {"BeginIndex": 6, "BeginTime": 2700, "EndIndex": 7, "EndTime": 3200, "Phoneme": "zhan3", "Text": "展"},
+            {"BeginIndex": 7, "BeginTime": 3200, "EndIndex": 8, "EndTime": 3700, "Phoneme": "li4", "Text": "历"},
+            {"BeginIndex": 8, "BeginTime": 3700, "EndIndex": 9, "EndTime": 4200, "Phoneme": "cheng2", "Text": "程"},
+            {"BeginIndex": 9, "BeginTime": 4200, "EndIndex": 10, "EndTime": 4400, "Phoneme": "", "Text": "。"},
+            {"BeginIndex": 10, "BeginTime": 5500, "EndIndex": 11, "EndTime": 6000, "Phoneme": "cong2", "Text": "从"},
+            {"BeginIndex": 11, "BeginTime": 6000, "EndIndex": 12, "EndTime": 6500, "Phoneme": "yi1", "Text": "1"},
+            {"BeginIndex": 12, "BeginTime": 6500, "EndIndex": 13, "EndTime": 7000, "Phoneme": "jiu3", "Text": "9"},
+            {"BeginIndex": 13, "BeginTime": 7000, "EndIndex": 14, "EndTime": 7500, "Phoneme": "wu3", "Text": "5"},
+            {"BeginIndex": 14, "BeginTime": 7500, "EndIndex": 15, "EndTime": 8000, "Phoneme": "ling2", "Text": "0"},
+            {"BeginIndex": 15, "BeginTime": 8000, "EndIndex": 16, "EndTime": 8500, "Phoneme": "nian2", "Text": "年"},
+            {"BeginIndex": 16, "BeginTime": 8500, "EndIndex": 17, "EndTime": 9000, "Phoneme": "dai4", "Text": "代"},
+            {"BeginIndex": 17, "BeginTime": 9000, "EndIndex": 18, "EndTime": 9500, "Phoneme": "kai1", "Text": "开"},
+            {"BeginIndex": 18, "BeginTime": 9500, "EndIndex": 19, "EndTime": 10000, "Phoneme": "shi3", "Text": "始"},
+            {"BeginIndex": 19, "BeginTime": 10000, "EndIndex": 20, "EndTime": 10200, "Phoneme": "", "Text": "，"},
+            {"BeginIndex": 20, "BeginTime": 10200, "EndIndex": 21, "EndTime": 10700, "Phoneme": "ren2", "Text": "人"},
+            {"BeginIndex": 21, "BeginTime": 10700, "EndIndex": 22, "EndTime": 11200, "Phoneme": "gong1", "Text": "工"},
+            {"BeginIndex": 22, "BeginTime": 11200, "EndIndex": 23, "EndTime": 11700, "Phoneme": "zhi4", "Text": "智"},
+            {"BeginIndex": 23, "BeginTime": 11700, "EndIndex": 24, "EndTime": 12200, "Phoneme": "neng2", "Text": "能"},
+            {"BeginIndex": 24, "BeginTime": 12200, "EndIndex": 25, "EndTime": 12700, "Phoneme": "zuo4", "Text": "作"},
+            {"BeginIndex": 25, "BeginTime": 12700, "EndIndex": 26, "EndTime": 13200, "Phoneme": "wei2", "Text": "为"},
+            {"BeginIndex": 26, "BeginTime": 13200, "EndIndex": 27, "EndTime": 13700, "Phoneme": "yi1", "Text": "一"},
+            {"BeginIndex": 27, "BeginTime": 13700, "EndIndex": 28, "EndTime": 14200, "Phoneme": "men2", "Text": "门"},
+            {"BeginIndex": 28, "BeginTime": 14200, "EndIndex": 29, "EndTime": 14700, "Phoneme": "xue2", "Text": "学"},
+            {"BeginIndex": 29, "BeginTime": 14700, "EndIndex": 30, "EndTime": 15200, "Phoneme": "ke1", "Text": "科"},
+            {"BeginIndex": 30, "BeginTime": 15200, "EndIndex": 31, "EndTime": 15700, "Phoneme": "zheng4", "Text": "正"},
+            {"BeginIndex": 31, "BeginTime": 15700, "EndIndex": 32, "EndTime": 16200, "Phoneme": "shi4", "Text": "式"},
+            {"BeginIndex": 32, "BeginTime": 16200, "EndIndex": 33, "EndTime": 16700, "Phoneme": "dan4", "Text": "诞"},
+            {"BeginIndex": 33, "BeginTime": 16700, "EndIndex": 34, "EndTime": 17200, "Phoneme": "sheng1", "Text": "生"},
+            {"BeginIndex": 34, "BeginTime": 17200, "EndIndex": 35, "EndTime": 17400, "Phoneme": "", "Text": "。"}
+          ],
+          content: `人工智能的发展历程。从1950年代开始，人工智能作为一门学科正式诞生。`,
+        },
+        {
+          title: "第二章：科技与人文的融合",
+          audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3",
+          // 字符级别的时间同步数据
+          characters: [
+            {"BeginIndex": 0, "BeginTime": 0, "EndIndex": 1, "EndTime": 500, "Phoneme": "ke1", "Text": "科"},
+            {"BeginIndex": 1, "BeginTime": 500, "EndIndex": 2, "EndTime": 1000, "Phoneme": "ji4", "Text": "技"},
+            {"BeginIndex": 2, "BeginTime": 1000, "EndIndex": 3, "EndTime": 1500, "Phoneme": "fa1", "Text": "发"},
+            {"BeginIndex": 3, "BeginTime": 1500, "EndIndex": 4, "EndTime": 2000, "Phoneme": "zhan3", "Text": "展"},
+            {"BeginIndex": 4, "BeginTime": 2000, "EndIndex": 5, "EndTime": 2500, "Phoneme": "yu3", "Text": "与"},
+            {"BeginIndex": 5, "BeginTime": 2500, "EndIndex": 6, "EndTime": 3000, "Phoneme": "ren2", "Text": "人"},
+            {"BeginIndex": 6, "BeginTime": 3000, "EndIndex": 7, "EndTime": 3500, "Phoneme": "wen2", "Text": "文"},
+            {"BeginIndex": 7, "BeginTime": 3500, "EndIndex": 8, "EndTime": 4000, "Phoneme": "guan1", "Text": "关"},
+            {"BeginIndex": 8, "BeginTime": 4000, "EndIndex": 9, "EndTime": 4500, "Phoneme": "huai2", "Text": "怀"},
+            {"BeginIndex": 9, "BeginTime": 4500, "EndIndex": 10, "EndTime": 5000, "Phoneme": "de5", "Text": "的"},
+            {"BeginIndex": 10, "BeginTime": 5000, "EndIndex": 11, "EndTime": 5500, "Phoneme": "ping2", "Text": "平"},
+            {"BeginIndex": 11, "BeginTime": 5500, "EndIndex": 12, "EndTime": 6000, "Phoneme": "heng2", "Text": "衡"},
+            {"BeginIndex": 12, "BeginTime": 6000, "EndIndex": 13, "EndTime": 6200, "Phoneme": "", "Text": "。"}
+          ],
+          content: `科技发展与人文关怀的平衡。`,
+        },
+        {
+          title: "第三章：未来社会的展望",
+          audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3",
+          // 字符级别的时间同步数据
+          characters: [
+            {"BeginIndex": 0, "BeginTime": 0, "EndIndex": 1, "EndTime": 500, "Phoneme": "zhan3", "Text": "展"},
+            {"BeginIndex": 1, "BeginTime": 500, "EndIndex": 2, "EndTime": 1000, "Phoneme": "wang4", "Text": "望"},
+            {"BeginIndex": 2, "BeginTime": 1000, "EndIndex": 3, "EndTime": 1500, "Phoneme": "wei4", "Text": "未"},
+            {"BeginIndex": 3, "BeginTime": 1500, "EndIndex": 4, "EndTime": 2000, "Phoneme": "lai2", "Text": "来"},
+            {"BeginIndex": 4, "BeginTime": 2000, "EndIndex": 5, "EndTime": 2500, "Phoneme": "she4", "Text": "社"},
+            {"BeginIndex": 5, "BeginTime": 2500, "EndIndex": 6, "EndTime": 3000, "Phoneme": "hui4", "Text": "会"},
+            {"BeginIndex": 6, "BeginTime": 3000, "EndIndex": 7, "EndTime": 3500, "Phoneme": "de5", "Text": "的"},
+            {"BeginIndex": 7, "BeginTime": 3500, "EndIndex": 8, "EndTime": 4000, "Phoneme": "fa1", "Text": "发"},
+            {"BeginIndex": 8, "BeginTime": 4000, "EndIndex": 9, "EndTime": 4500, "Phoneme": "zhan3", "Text": "展"},
+            {"BeginIndex": 9, "BeginTime": 4500, "EndIndex": 10, "EndTime": 5000, "Phoneme": "qu1", "Text": "趋"},
+            {"BeginIndex": 10, "BeginTime": 5000, "EndIndex": 11, "EndTime": 5500, "Phoneme": "shi4", "Text": "势"},
+            {"BeginIndex": 11, "BeginTime": 5500, "EndIndex": 12, "EndTime": 5700, "Phoneme": "", "Text": "。"}
+          ],
+          content: `展望未来社会的发展趋势。`,
+        },
+      ],
+      currentChapterIndex: 0,
+      playing: false,
+      currentTime: 0,
+      duration: 0,
+      activeCharIndex: -1,
+      scrollTop: 0,
+      scrollViewHeight: 0,
+    };
+  },
+  mounted() {
+    this.syncAudioState();
+    this.calculateScrollViewHeight();
+  },
+  onShow() {
+    // 页面显示时同步音频状态
+    this.syncAudioState();
+  },
+  onHide() {
+    // 页面隐藏时保持音频播放状态
+    // 背景音频会自动继续播放
+  },
+  computed: {
+    currentChapter() {
+      const chapter = this.chapters[this.currentChapterIndex];
+      // 使用字符级别的时间同步数据
+      const characters = chapter.characters.map((char) => {
+        return {
+          ...char,
+          timeInSeconds: char.BeginTime / 1000, // 将毫秒转换为秒
+        };
+      });
+      return {
+        ...chapter,
+        characters: characters,
+      };
+    },
+    progress() {
+      return (this.currentTime / this.duration) * 100 || 0;
+    },
+    currentTimeFormatted() {
+      return this.formatTime(this.currentTime);
+    },
+    durationFormatted() {
+      return this.formatTime(this.duration);
+    },
+  },
+  methods: {
+    togglePlay() {
+      if (this.playing) {
+        this.$refs.audioPlayer.pause();
+        this.playing = false;
+      } else {
+        this.$refs.audioPlayer.play();
+        this.playing = true;
+      }
+    },
+    prevChapter() {
+      if (this.currentChapterIndex > 0) {
+        this.currentChapterIndex--;
+        this.resetPlayback();
+      }
+    },
+    nextChapter() {
+      if (this.currentChapterIndex < this.chapters.length - 1) {
+        this.currentChapterIndex++;
+        this.resetPlayback();
+      }
+    },
+    resetPlayback() {
+      this.playing = false;
+      this.currentTime = 0;
+      this.duration = 0;
+      this.activeCharIndex = -1;
+      this.scrollTop = 0;
+
+      // 更新背景音频信息
+      const currentChapter = this.chapters[this.currentChapterIndex];
+      if (
+        this.$refs.audioPlayer &&
+        this.$refs.audioPlayer.backgroundAudioManager
+      ) {
+        const bgAudio = this.$refs.audioPlayer.backgroundAudioManager;
+        bgAudio.title = currentChapter.title;
+        bgAudio.epname = `第${this.currentChapterIndex + 1}章`;
+        bgAudio.src = currentChapter.audioUrl;
+        // 确保音频从头开始播放
+        bgAudio.currentTime = 0;
+        // 如果音频播放器有seek方法，也调用它来确保重置
+        if (this.$refs.audioPlayer.seek) {
+          this.$refs.audioPlayer.seek(0);
+        }
+      }
+    },
+    onTimeUpdate(e) {
+      this.currentTime = e.currentTime;
+      this.duration = e.duration;
+
+      // 同步播放状态
+      this.playing = !e.paused;
+
+      // 找到当前应该高亮的字符
+      const characters = this.currentChapter.characters;
+      const currentTimeMs = this.currentTime * 1000; // 转换为毫秒
+      for (let i = characters.length - 1; i >= 0; i--) {
+        if (currentTimeMs >= characters[i].BeginTime && currentTimeMs <= characters[i].EndTime) {
+          if (this.activeCharIndex !== i) {
+            this.activeCharIndex = i;
+            // 滚动到当前字符，这里简单实现：每个字符高度约30rpx，滚动到当前字符
+            this.scrollTop = Math.floor(i / 20) * 30; // 假设每行约20个字符
+          }
+          break;
+        }
+      }
+    },
+    onEnded() {
+      this.playing = false;
+      // 自动播放下一章节
+      if (this.currentChapterIndex < this.chapters.length - 1) {
+        this.nextChapter();
+        setTimeout(() => {
+          this.$refs.audioPlayer.play();
+          this.playing = true;
+        }, 500);
+      }
+    },
+    seek(e) {
+      // 使用uni.createSelectorQuery获取进度条信息
+      const query = uni.createSelectorQuery().in(this);
+      query
+        .select(".progress-bar")
+        .boundingClientRect((rect) => {
+          if (rect) {
+            const clickX = e.detail.x - rect.left;
+            const progressPercent = clickX / rect.width;
+            const seekTime = progressPercent * this.duration;
+
+            if (seekTime >= 0 && seekTime <= this.duration) {
+              this.$refs.audioPlayer.seek(seekTime);
+            }
+          }
+        })
+        .exec();
+    },
+    formatTime(seconds) {
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins.toString().padStart(2, "0")}:${secs
+        .toString()
+        .padStart(2, "0")}`;
+    },
+    syncAudioState() {
+      // 同步背景音频状态到界面
+      if (
+        this.$refs.audioPlayer &&
+        this.$refs.audioPlayer.backgroundAudioManager
+      ) {
+        const bgAudio = this.$refs.audioPlayer.backgroundAudioManager;
+
+        // 检查当前是否有音频在播放
+        if (bgAudio.src) {
+          // 同步播放状态 - 注意：paused为true表示暂停，false表示播放
+          this.playing = !bgAudio.paused;
+
+          // 同步时间信息
+          this.currentTime = bgAudio.currentTime || 0;
+          this.duration = bgAudio.duration || 0;
+
+          // 如果有音频在播放，启动时间更新
+          if (this.playing) {
+            this.$refs.audioPlayer.startTimeUpdate();
+          }
+        } else {
+          // 没有音频源时重置状态
+          this.playing = false;
+          this.currentTime = 0;
+          this.duration = 0;
+        }
+      }
+    },
+    calculateScrollViewHeight() {
+      // 获取系统信息
+      const systemInfo = uni.getSystemInfoSync();
+      const windowHeight = systemInfo.windowHeight;
+
+      // 计算控制栏高度（大约300rpx转换为px）
+      const controlsHeight = 300 * (systemInfo.windowWidth / 750);
+
+      // 计算内容区域可用高度
+      this.scrollViewHeight = windowHeight - controlsHeight - 60; // 60px为额外边距
+    },
+  },
+};
+</script>
+
+<style>
+.container {
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  padding: 30rpx;
+  position: relative;
+}
+
+/* 顶部标题栏样式 */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 40rpx 48rpx;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  flex: 1;
+}
+
+.title {
+  font-size: 48rpx;
+  font-weight: 700;
+  color: #2d3748;
+  margin-bottom: 8rpx;
+}
+
+.subtitle {
+  font-size: 32rpx;
+  color: #718096;
+  font-weight: 500;
+}
+
+.chapter-info {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  padding: 16rpx 32rpx;
+  border-radius: 40rpx;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+}
+
+.chapter-count {
+  color: white;
+  font-size: 28rpx;
+  font-weight: 600;
+}
+
+.content {
+  width: 690rpx;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20rpx);
+  border-radius: 32rpx;
+  margin: 0 auto;
+  margin-bottom: 20rpx;
+}
+
+.content-wrapper {
+  padding: 48rpx;
+}
+
+.article-content {
+  line-height: 1.8;
+  font-size: 32rpx;
+  color: #2d3748;
+  text-align: justify;
+}
+
+.character {
+  transition: all 0.3s ease;
+  padding: 2rpx 4rpx;
+  border-radius: 6rpx;
+  display: inline;
+  margin: 0 1rpx;
+}
+
+.character.active {
+  background: linear-gradient(
+    135deg,
+    rgba(102, 126, 234, 0.25),
+    rgba(118, 75, 162, 0.25)
+  );
+  color: #667eea;
+  font-weight: 700;
+  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
+  transform: scale(1.1);
+}
+
+/* 底部控制栏样式 */
+.controls {
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(40rpx);
+  border-top: 2rpx solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 -16rpx 64rpx rgba(0, 0, 0, 0.12),
+    0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
+  border-radius: 48rpx 48rpx 0 0;
+  padding: 32rpx 40rpx 40rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+/* 章节信息栏 */
+.chapter-info-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 8rpx;
+}
+
+.chapter-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #2d3748;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 16rpx;
+}
+
+.chapter-count {
+  font-size: 24rpx;
+  color: #718096;
+  font-weight: 500;
+  background: rgba(139, 92, 246, 0.1);
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  backdrop-filter: blur(10rpx);
+}
+
+/* 进度条区域 */
+.progress-section {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.current-time,
+.duration {
+  font-size: 24rpx;
+  color: #718096;
+  font-weight: 500;
+  font-family: "Courier New", monospace;
+  min-width: 80rpx;
+  text-align: center;
+}
+
+/* 控制按钮区域 */
+.control-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32rpx;
+}
+
+/* 播放按钮 */
+.play-btn {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #8b5cf6, #a855f7);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 12rpx 40rpx rgba(139, 92, 246, 0.4),
+    0 6rpx 20rpx rgba(0, 0, 0, 0.15);
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+}
+
+/* 控制按钮（上一章/下一章） */
+.control-btn {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  border: none;
+  background: rgba(139, 92, 246, 0.08);
+  color: #8b5cf6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.15);
+  backdrop-filter: blur(20rpx);
+  position: relative;
+  overflow: hidden;
+}
+
+.play-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.05)
+  );
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.play-btn:hover {
+  transform: scale(1.08);
+  box-shadow: 0 18rpx 56rpx rgba(139, 92, 246, 0.5),
+    0 9rpx 28rpx rgba(0, 0, 0, 0.2);
+}
+
+.play-btn:hover::before {
+  opacity: 1;
+}
+
+.play-btn:active {
+  transform: scale(0.96);
+  transition: transform 0.1s ease;
+}
+
+/* 进度条容器 */
+.progress-container {
+  flex: 1;
+  position: relative;
+}
+
+.progress-bar {
+  height: 12rpx;
+  background: rgba(139, 92, 246, 0.12);
+  border-radius: 6rpx;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  backdrop-filter: blur(20rpx);
+  box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+}
+
+.progress {
+  height: 100%;
+  background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
+  border-radius: 6rpx;
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.3);
+  position: relative;
+}
+
+.progress::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.3) 0%,
+    rgba(255, 255, 255, 0.1) 100%
+  );
+  border-radius: 6rpx;
+}
+
+.progress-thumb {
+  position: absolute;
+  top: 50%;
+  width: 28rpx;
+  height: 28rpx;
+  background: white;
+  border: 4rpx solid #8b5cf6;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 6rpx 20rpx rgba(139, 92, 246, 0.4),
+    0 3rpx 6rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.progress-thumb:hover {
+  transform: translate(-50%, -50%) scale(1.2);
+  box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.5),
+    0 4rpx 8rpx rgba(0, 0, 0, 0.15);
+}
+
+/* 控制按钮交互效果 */
+.control-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(139, 92, 246, 0.1),
+    rgba(168, 85, 247, 0.05)
+  );
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.control-btn:hover {
+  background: rgba(139, 92, 246, 0.15);
+  transform: scale(1.1);
+  box-shadow: 0 8rpx 32rpx rgba(139, 92, 246, 0.25);
+}
+
+.control-btn:hover::before {
+  opacity: 1;
+}
+
+.control-btn:active {
+  transform: scale(0.95);
+  transition: transform 0.1s ease;
+}
+
+.control-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2rpx 6rpx rgba(139, 92, 246, 0.1);
+}
+
+.control-btn:disabled:hover {
+  background: rgba(139, 92, 246, 0.08);
+  transform: none;
+  box-shadow: 0 2rpx 6rpx rgba(139, 92, 246, 0.1);
+}
+
+.control-btn:disabled::before {
+  opacity: 0;
+}
+
+/* 控制图标样式 */
+.control-icon {
+  font-size: 32rpx;
+  line-height: 1;
+  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
+}
+
+.play-icon {
+  font-size: 42rpx;
+  line-height: 1;
+  margin-left: 3rpx;
+  filter: drop-shadow(0 3rpx 6rpx rgba(0, 0, 0, 0.2));
+}
+</style>

audioBook/pages/index.vue

@@ -15,12 +15,13 @@
       <view class="content-wrapper">
         <view class="article-content">
           <text
-            v-for="(line, index) in currentChapter.lines"
+            v-for="(sentence, index) in currentChapter.sentences"
             :key="index"
+            :id="`sentence-${index}`"
             class="sentence"
-            :class="{ active: index === activeLineIndex }"
+            :class="{ active: index === activeSentenceIndex }"
           >
-            {{ line.text }}
+            {{ sentence.FinalSentence }}
           </text>
         </view>
       </view>
@@ -89,7 +90,8 @@
 <script>
 // 由于uniapp不支持直接使用audio元素，我们使用innerAudioContext
 import AudioPlayer from "../components/AudioPlayer.vue";
-
+const msg = require("../components/msg.json");
+console.log(msg);
 export default {
   components: {
     AudioPlayer,
@@ -98,68 +100,22 @@ export default {
     return {
       chapters: [
         {
-          title: "第一章：人工智能的崛起",
+          title: "元界修真传",
-          audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3",
+          audioUrl:
-          content: `[00:00.00] 人工智能的发展历程
+            "https://des.js-dyyj.com/data/2025/09/15/ecd0671f-ba8b-4b69-bb07-1a1d8b4bbfd0.MP3",
-[00:05.50] 从1950年代开始，人工智能作为一门学科正式诞生
+          // 句子级别的时间同步数据，从msg.json的ResultDetail数组获取
-[00:12.30] 阿兰·图灵提出了著名的图灵测试
+          sentences:
-[00:18.80] 这个测试成为了判断机器是否具有智能的标准
+            require("../components/msg.json")?.Response?.Data?.ResultDetail ||
-[00:25.40] 早期的人工智能研究主要集中在符号推理
+            [],
-[00:32.20] 科学家们试图用逻辑和规则来模拟人类思维
+          content:
-[00:39.10] 然而，这种方法在处理复杂问题时遇到了困难
+            require("../components/msg.json")?.Response?.Data?.Result || "",
-[00:46.70] 直到神经网络和机器学习的出现
-[00:53.50] 人工智能才迎来了新的发展机遇
-[01:00.30] 深度学习技术的突破更是推动了AI的快速发展
-[01:07.80] 如今，人工智能已经渗透到我们生活的方方面面
-[01:14.60] 从智能手机到自动驾驶汽车
-[01:21.40] 从医疗诊断到金融分析
-[01:28.20] AI正在改变着整个世界的运作方式`,
-        },
-        {
-          title: "第二章：科技与人文的融合",
-          audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3",
-          content: `[00:00.00] 科技发展与人文关怀的平衡
-[00:06.50] 在快速发展的数字时代
-[00:12.20] 我们常常被各种新技术所包围
-[00:18.00] 智能手机、物联网、云计算
-[00:24.40] 这些技术极大地便利了我们的生活
-[00:30.10] 但同时也带来了新的挑战
-[00:35.80] 如何在享受科技便利的同时
-[00:41.50] 保持人与人之间的真实连接
-[00:47.20] 这成为了现代社会的重要课题
-[00:53.90] 教育领域正在探索新的教学模式
-[01:00.60] 将传统的人文教育与现代科技相结合
-[01:07.30] 培养既有技术能力又有人文素养的人才
-[01:14.00] 艺术创作也在科技的推动下焕发新生
-[01:20.70] 数字艺术、虚拟现实、增强现实
-[01:27.40] 为艺术家提供了全新的创作工具和表达方式`,
-        },
-        {
-          title: "第三章：未来社会的展望",
-          audioUrl: "https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3",
-          content: `[00:00.00] 展望未来社会的发展趋势
-[00:06.50] 可持续发展将成为全球共识
-[00:12.20] 绿色能源技术不断突破
-[00:18.00] 太阳能、风能、氢能源的应用日益广泛
-[00:24.40] 智慧城市的建设正在加速推进
-[00:30.10] 通过大数据和人工智能
-[00:35.80] 城市管理将变得更加高效和智能
-[00:41.50] 交通拥堵、环境污染等问题将得到有效解决
-[00:47.20] 教育模式也将发生根本性变革
-[00:53.90] 个性化学习将成为主流
-[01:00.60] 每个学生都能获得量身定制的教育方案
-[01:07.30] 远程教育和虚拟课堂将普及全球
-[01:14.00] 医疗健康领域将迎来精准医疗时代
-[01:20.70] 基因治疗、纳米医学、再生医学
-[01:27.40] 这些前沿技术将为人类健康带来革命性改变
-[01:34.10] 未来的社会将更加包容、智能和可持续`,
         },
       ],
       currentChapterIndex: 0,
       playing: false,
       currentTime: 0,
       duration: 0,
-      activeLineIndex: -1,
+      activeSentenceIndex: -1,
       scrollTop: 0,
       scrollViewHeight: 0,
     };
@@ -179,27 +135,17 @@ export default {
   computed: {
     currentChapter() {
       const chapter = this.chapters[this.currentChapterIndex];
-      // 解析章节内容
+      // 使用句子级别的时间同步数据
-      const lines = chapter.content
+      const sentences = chapter.sentences.map((sentence) => {
-        .split("\n")
+        return {
-        .filter((line) => line.trim() !== "");
+          ...sentence,
-      const parsedLines = lines.map((line) => {
+          startTimeInSeconds: sentence.StartMs / 1000, // 将毫秒转换为秒
-        const match = line.match(/\[(\d+):(\d+)\.(\d+)\](.*)/);
+          endTimeInSeconds: sentence.EndMs / 1000, // 将毫秒转换为秒
-        if (match) {
+        };
-          return {
-            time: match[0].slice(0, match[0].indexOf("]") + 1),
-            text: match[4],
-            timeInSeconds:
-              parseInt(match[1]) * 60 +
-              parseInt(match[2]) +
-              parseInt(match[3]) / 100,
-          };
-        }
-        return { time: "", text: line, timeInSeconds: 0 };
       });
       return {
         ...chapter,
-        lines: parsedLines,
+        sentences: sentences,
       };
     },
     progress() {
@@ -238,7 +184,7 @@ export default {
       this.playing = false;
       this.currentTime = 0;
       this.duration = 0;
-      this.activeLineIndex = -1;
+      this.activeSentenceIndex = -1;
       this.scrollTop = 0;
 
       // 更新背景音频信息
@@ -266,18 +212,8 @@ export default {
       // 同步播放状态
       this.playing = !e.paused;
 
-      // 找到当前应该高亮的行
+      // 句子级别的高亮同步
-      const lines = this.currentChapter.lines;
+      this.updateSentenceHighlight(this.currentTime);
-      for (let i = lines.length - 1; i >= 0; i--) {
-        if (this.currentTime >= lines[i].timeInSeconds) {
-          if (this.activeLineIndex !== i) {
-            this.activeLineIndex = i;
-            // 滚动到当前行，这里简单实现：每行高度约100rpx，滚动到当前行
-            this.scrollTop = i * 100;
-          }
-          break;
-        }
-      }
     },
     onEnded() {
       this.playing = false;
@@ -303,11 +239,93 @@ export default {
 
             if (seekTime >= 0 && seekTime <= this.duration) {
               this.$refs.audioPlayer.seek(seekTime);
+              
+              // 手动拖动后同步句子高亮和滚动位置
+              this.updateSentenceHighlight(seekTime);
             }
           }
         })
         .exec();
     },
+    updateSentenceHighlight(currentTimeSeconds) {
+      // 根据指定时间找到对应的句子并更新高亮和滚动位置
+      const sentences = this.currentChapter.sentences;
+      let targetIndex = -1;
+      
+      // 精确匹配：找到当前时间对应的句子
+      for (let i = 0; i < sentences.length; i++) {
+        const sentence = sentences[i];
+        if (
+          currentTimeSeconds >= sentence.startTimeInSeconds &&
+          currentTimeSeconds <= sentence.endTimeInSeconds
+        ) {
+          targetIndex = i;
+          break;
+        }
+      }
+      
+      // 如果没有精确匹配，尝试找到最接近的句子
+      if (targetIndex === -1 && sentences.length > 0) {
+        // 找到时间最接近的句子，而不是简单的比例估算
+        let minDistance = Infinity;
+        for (let i = 0; i < sentences.length; i++) {
+          const sentence = sentences[i];
+          const sentenceMiddle = (sentence.startTimeInSeconds + sentence.endTimeInSeconds) / 2;
+          const distance = Math.abs(currentTimeSeconds - sentenceMiddle);
+          if (distance < minDistance) {
+            minDistance = distance;
+            targetIndex = i;
+          }
+        }
+      }
+      
+      // 只有当索引真正发生变化时才更新
+      if (targetIndex >= 0 && targetIndex !== this.activeSentenceIndex) {
+        const previousIndex = this.activeSentenceIndex;
+        this.activeSentenceIndex = targetIndex;
+        
+        // 使用$nextTick确保DOM更新后再计算滚动位置
+        this.$nextTick(() => {
+          this.scrollToSentence(targetIndex);
+        });
+      }
+    },
+    scrollToSentence(index) {
+      // 动态获取句子位置并滚动到可视区域
+      const query = uni.createSelectorQuery().in(this);
+      
+      // 获取目标句子的位置信息
+      query.select(`#sentence-${index}`).boundingClientRect();
+      // 获取滚动容器的位置信息
+      query.select('.article-content').boundingClientRect();
+      
+      query.exec((res) => {
+        if (res && res[0] && res[1]) {
+          const sentenceRect = res[0];
+          const containerRect = res[1];
+          
+          // 计算句子相对于容器顶部的位置
+          const sentenceTop = sentenceRect.top - containerRect.top;
+          
+          // 计算滚动位置，让句子显示在可视区域中央
+          const scrollPosition = Math.max(
+            0,
+            sentenceTop - this.scrollViewHeight / 2 + sentenceRect.height / 2
+          );
+          
+          // 更新滚动位置
+          this.scrollTop = scrollPosition;
+        } else {
+          // 如果无法获取元素位置，使用估算方式
+          const estimatedHeight = 60;
+          const scrollPosition = Math.max(
+            0,
+            index * estimatedHeight - this.scrollViewHeight / 2
+          );
+          this.scrollTop = scrollPosition;
+        }
+      });
+    },
     formatTime(seconds) {
       const mins = Math.floor(seconds / 60);
       const secs = Math.floor(seconds % 60);
@@ -431,21 +449,19 @@ export default {
 }
 
 .sentence {
+  display: block;
+  padding: 20rpx;
+  margin: 10rpx 0;
+  border-radius: 12rpx;
+  line-height: 1.8;
   transition: all 0.3s ease;
-  padding: 4rpx 8rpx;
-  border-radius: 8rpx;
-  display: inline;
 }
 
 .sentence.active {
-  background: linear-gradient(
+  background-color: rgba(255, 215, 0, 0.2);
-    135deg,
-    rgba(102, 126, 234, 0.15),
-    rgba(118, 75, 162, 0.15)
-  );
-  color: #667eea;
   font-weight: 600;
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
+  box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
+  transform: translateX(10rpx);
 }
 
 /* 底部控制栏样式 */