diff --git a/lib/pages/practice/topic_picture_page.dart b/lib/pages/practice/topic_picture_page.dart
index 799c333..a857627 100644
--- a/lib/pages/practice/topic_picture_page.dart
+++ b/lib/pages/practice/topic_picture_page.dart
@@ -295,17 +295,16 @@ class _TopicPicturePage extends StatelessWidget {
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  GestureDetector(
+                  SpeakerWidget(
+                    isPlaying: bloc.voicePlayState == VoicePlayState.playing,
+                    // 控制动画播放
+                    isClickable: true,
+                    // 控制是否可点击
+                    width: 32.w,
+                    height: 32.w,
                     onTap: () {
                       bloc.add(VoicePlayEvent());
                     },
-                    child: Image.asset(
-                      bloc.voicePlayState == VoicePlayState.playing
-                          ? 'reade_answer'.assetGif
-                          : 'voice'.assetPng,
-                      height: 33.h,
-                      width: 30.w,
-                    ),
                   ),
                   10.horizontalSpace,
                   Text(topics?.word ?? '',
@@ -376,16 +375,17 @@ class _TopicPicturePage extends StatelessWidget {
         return SafeArea(
           child: Column(
             children: [
-              GestureDetector(
-                  onTap: () {
-                    bloc.add(VoicePlayEvent());
-                  },
-                  child: Image.asset(
-                      bloc.voicePlayState == VoicePlayState.playing
-                          ? 'reade_answer'.assetGif
-                          : 'voice'.assetPng,
-                      height: 33.h,
-                      width: 30.w)),
+              SpeakerWidget(
+                isPlaying: bloc.voicePlayState == VoicePlayState.playing,
+                // 控制动画播放
+                isClickable: true,
+                // 控制是否可点击
+                width: 32.w,
+                height: 32.w,
+                onTap: () {
+                  bloc.add(VoicePlayEvent());
+                },
+              ),
               26.verticalSpace,
               SizedBox(
                 width: 163.w * (topics?.topicAnswerList?.length ?? 0),
diff --git a/lib/pages/reading/reading_page.dart b/lib/pages/reading/reading_page.dart
index 509968d..46667f6 100644
--- a/lib/pages/reading/reading_page.dart
+++ b/lib/pages/reading/reading_page.dart
@@ -9,6 +9,7 @@ import 'package:wow_english/route/route.dart';
 import '../../common/core/app_consts.dart';
 import '../../common/core/user_util.dart';
 import '../../common/widgets/recorder_widget.dart';
+import '../../common/widgets/speaker_widget.dart';
 import '../../models/course_process_entity.dart';
 import '../../utils/log_util.dart';
 import 'bloc/reading_bloc.dart';
@@ -156,21 +157,18 @@ class _ReadingPage extends StatelessWidget {
                   child: Row(
                     children: [
                       5.horizontalSpace,
-                      GestureDetector(
+                      SpeakerWidget(
+                        isPlaying:
+                            bloc.voicePlayState == VoicePlayState.playing &&
+                                bloc.isOriginAudioPlaying,
+                        // 控制动画播放
+                        isClickable: !bloc.isRecording,
+                        // 控制是否可点击
+                        width: 42.w,
+                        height: 42.w,
                         onTap: () {
-                          if (bloc.isRecording) {
-                            return;
-                          }
                           bloc.add(PlayOriginalAudioEvent(null));
                         },
-                        child: Image.asset(
-                          bloc.voicePlayState == VoicePlayState.playing &&
-                                  bloc.isOriginAudioPlaying
-                              ? 'reade_answer'.assetGif
-                              : 'voice'.assetPng,
-                          height: 40.h,
-                          width: 45.w,
-                        ),
                       ),
                       SizedBox(
                         width: 10.w,
@@ -188,17 +186,16 @@ class _ReadingPage extends StatelessWidget {
                       ),
                       RecorderWidget(
                         isPlaying: bloc.isRecording,
-                        isClickable: bloc.voicePlayState != VoicePlayState.playing,
+                        isClickable:
+                            bloc.voicePlayState != VoicePlayState.playing,
                         width: 60.w,
                         height: 60.w,
                         onTap: () {
                           if (bloc.isRecording) {
                             bloc.add(XSVoiceStopEvent());
                           } else {
-                            bloc.add(XSVoiceStartEvent(
-                                bloc.readingContent(),
-                                '0',
-                                UserUtil.getUser()?.id.toString()));
+                            bloc.add(XSVoiceStartEvent(bloc.readingContent(),
+                                '0', UserUtil.getUser()?.id.toString()));
                           }
                         },
                       ),