鸿蒙OS 添加多媒体支持

本小节主要说明 HarmonyOS 车载多媒体的使用方法，以音乐 Demo 开发为例，开发步骤如下：

1. 在布局中添加音乐播放控件。

   <?xml version="1.0" encoding="utf-8"?>
   <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                      ohos:id="$+id:play_music_root"
                      ohos:width="-1"
                      ohos:height="-1"
                      ohos:left_padding="24vp"
                      ohos:right_padding="24vp"
                      ohos:orientation="1">
       <AdaptiveBoxLayout ohos:id="$+id:title_bar"
                          ohos:width="-1"
                          ohos:height="-2"
                          ohos:top_margin="24vp">
           <Image ohos:id="$+id:arrow_down_btn"
                  ohos:width="24vp"
                  ohos:height="24vp"
                  ohos:align_parent_left="$+id:title_bar"
                  ohos:image_src="$media:default.png"/>
           <Image ohos:id="$+id:music_heart_btn"
                  ohos:width="24vp"
                  ohos:height="24vp"
                  ohos:left_of="$+id:music_hiplay_btn"
                  ohos:image_src="$media:default.png"/>
           <Image ohos:id="$+id:music_hiplay_btn"
                  ohos:width="24vp"
                  ohos:height="24vp"
                  ohos:left_margin="16vp"
                  ohos:align_parent_right="$+id:title_bar"
                  ohos:image_src="$media:default.png"/>
       </AdaptiveBoxLayout>
       <DirectionalLayout ohos:id="$+id:cover_container"
                          ohos:width="-1"
                          ohos:height="-2"
                          ohos:weight="1"
                          ohos:orientation="1">
           <AdaptiveBoxLayout
                   ohos:id="$+id:music_cover_adapt"
                   ohos:width="-1"
                   ohos:height="-1">
               <DirectionalLayout
                       ohos:id="$+id:music_cover_wrap1"
                       ohos:width="-2"
                       ohos:height="-2"
                       ohos:padding="20vp"
                       ohos:orientation="1">
                   <Image ohos:id="$+id:music_cover"
                          ohos:width="300vp"
                          ohos:height="300vp"
                          ohos:layout_alignment="17"
                          ohos:image_src="$media:default.png"/>
               </DirectionalLayout>
               <DirectionalLayout
                       ohos:id="$+id:music_cover_wrap2"
                       ohos:width="-1"
                       ohos:height="-1"
                       ohos:orientation="1">
                   <DirectionalLayout
                           ohos:width="-1"
                           ohos:height="-2"
                           ohos:layout_alignment="17"
                           ohos:top_margin="20vp"
                           ohos:bottom_margin="20vp"
                           ohos:orientation="1">
                       <Text ohos:id="$+id:music_title"
                             ohos:text_size="20vp"
                             ohos:shape="0"
                             ohos:text_color="#FF000000"
                             ohos:text_alignment="72"
                             ohos:width="-1"
                             ohos:height="-2"
                             ohos:multiple_lines="false"/>
                       <Text ohos:id="$+id:music_auth"
                             ohos:text_size="14vp"
                             ohos:shape="0"
                             ohos:top_margin="4vp"
                             ohos:text_color="#FF000000"
                             ohos:text_alignment="72"
                             ohos:width="-1"
                             ohos:height="-2"
                             ohos:multiple_lines="false"/>
                   </DirectionalLayout>
                   <Text ohos:id="$+id:music_lrc"
                         ohos:width="-1"
                         ohos:height="-2"
                         ohos:layout_alignment="17"
                         ohos:text="See the lights see the party the ball grows"
                         ohos:text_size="13vp"
                         ohos:text_color="#FF000000"
                         ohos:text_alignment="72"/>
               </DirectionalLayout>
           </AdaptiveBoxLayout>
       </DirectionalLayout>

    
       <DirectionalLayout ohos:id="$+id:foot_wrap"
                          ohos:width="-1"
                          ohos:height="-2"
                          ohos:orientation="1">
           <DirectionalLayout ohos:id="$+id:progress_container"
                              ohos:width="-1"
                              ohos:height="-2"
                              ohos:top_margin="10vp"
                              ohos:orientation="0">
               <Text ohos:id="$+id:play_progress_time"
                     ohos:width="-2"
                     ohos:height="-2"
                     ohos:layout_alignment="16"
                     ohos:right_margin="6vp"
                     ohos:text_size="13vp"
                     ohos:text_color="#FF000000"
                     ohos:text_alignment="72"/>
               <SeekBar ohos:id="$+id:play_progress_bar"
                        ohos:width="-1"
                        ohos:height="14vp"
                        ohos:layout_alignment="16"
                        ohos:weight="1"/>
               <Text ohos:id="$+id:play_total_time"
                     ohos:width="-2"
                     ohos:height="-2"
                     ohos:layout_alignment="16"
                     ohos:left_margin="6vp"
                     ohos:text_size="13vp"
                     ohos:text_color="#FF000000"
                     ohos:text_alignment="72"/>
           </DirectionalLayout>
           <DirectionalLayout ohos:id="$+id:control_container"
                              ohos:width="-1"
                              ohos:height="96vp"
                              ohos:orientation="0">
               <DirectionalLayout ohos:id="$+id:control_box1"
                                  ohos:width="-2"
                                  ohos:height="-2"
                                  ohos:weight="1"
                                  ohos:layout_alignment="17"
                                  ohos:orientation="1">
                   <Image ohos:id="$+id:volume_down_btn"
                          ohos:width="24vp"
                          ohos:height="24vp"
                          ohos:layout_alignment="17"
                          ohos:image_src="$media:default.png"/>
               </DirectionalLayout>
               <DirectionalLayout ohos:id="$+id:control_box2"
                                  ohos:width="-2"
                                  ohos:height="-2"
                                  ohos:weight="1"
                                  ohos:layout_alignment="17"
                                  ohos:orientation="1">
                   <Image ohos:id="$+id:prev_btn"
                          ohos:width="40vp"
                          ohos:height="40vp"
                          ohos:layout_alignment="17"
                          ohos:image_src="$media:default.png"/>
               </DirectionalLayout>
               <DirectionalLayout ohos:id="$+id:control_box3"
                                  ohos:width="-2"
                                  ohos:height="-2"
                                  ohos:weight="1"
                                  ohos:layout_alignment="17"
                                  ohos:orientation="1">
                   <Image ohos:id="$+id:play_btn"
                          ohos:width="64vp"
                          ohos:height="64vp"
                          ohos:layout_alignment="17"
                          ohos:image_src="$media:default.png"/>
               </DirectionalLayout>
               <DirectionalLayout ohos:id="$+id:control_box4"
                                  ohos:width="-2"
                                  ohos:height="-2"
                                  ohos:weight="1"
                                  ohos:layout_alignment="17"
                                  ohos:orientation="1">
                   <Image ohos:id="$+id:next_btn"
                          ohos:width="40vp"
                          ohos:height="40vp"
                          ohos:layout_alignment="17"
                          ohos:image_src="$media:default.png"/>
               </DirectionalLayout>
               <DirectionalLayout ohos:id="$+id:control_box5"
                                  ohos:width="-2"
                                  ohos:height="-2"
                                  ohos:weight="1"
                                  ohos:layout_alignment="17"
                                  ohos:orientation="1">
                   <Image ohos:id="$+id:volume_up_btn"
                          ohos:width="24vp"
                          ohos:height="24vp"
                          ohos:layout_alignment="17"
                          ohos:image_src="$media:default.png"/>
               </DirectionalLayout>
           </DirectionalLayout>
       </DirectionalLayout>
   </DirectionalLayout>

1. 加载播放控件。

   super.setUIContent(ResourceTable.Layout_play_music_layout);

1. 实现音乐播放管理类。

   public class PlayManager {
       ...
       private Player player;
       public synchronized boolean play(String filePath, int startMilliSecond) {
           ...
           FileDescriptor fd = IoUtil.getFileDescriptor(filePath);
           Source source = new Source(fd);
           player.setSource(source);
           boolean isSuccess = player.prepare();

    
           isSuccess = player.rewindTo(startMilliSecond * MICRO_MILLI_RATE, REWIND_NEXT_SYNC);
           // 播放
           isSuccess = player.play();
           isPlaying.set(isSuccess);
           return isSuccess;
       }

    
       public synchronized void pause(int startMilliSecond) {
           ...
           player.pause();
       }

    
       public synchronized void stop() {
           if (player == null) {
               return;
           }
           player.stop();
           isPlaying.set(false);
           LogUtil.info(TAG, "stop success");
           player.release();
           player = null;
       }
   }

1. 调用音乐播放管理类的接口播放音乐。

   // 指定歌曲播放
   String path = "/data/music/files/data/wonderful_life.mp3";
   PlayManager.getInstance().play(path,1);

1. 在布局中增加视频播放控件。

   // 视频布局实现方法
   public class MySurfaceSlice extends AbilitySlice {
       ... 
       public void makeSurfaceView() {
           ... 
           mySurfaceProvider = new SurfaceProvider(this);
           adaptiveBoxLayoutSurfaceView.AdaptiveBoxLayout.LayoutConfig().addComponent(mySurfaceProvider);
       }
   }

1. 实现视频播放管理类。

   public class VideoPlay {
       public synchronized void startPlay() {
           ...   
           ret = playImpl.play();
       }

    
       public synchronized void preParePlay() {
           ...    
           ret = playImpl.prepare();
       }

    
       public synchronized void pausePlay() {
           ...    
           boolean pauseRet = playImpl.pause();;
       }

    
       public synchronized void setSourcePlay(String filePath) {
            ...    
           FileDescriptor fd = IoUtil.getFileDescriptor(filePath);
           Source source = new Source(fd);
           playImpl.setSource(source);
       }

    
       @Override
       public synchronized void onStop() {
           ...    
           super.onStop();
       }
   }

1. 调用视频播放管理类的接口播放视频。

   // 调用视频播放类进行播放
   String filePath = "/data/video/files/data/festival.mp4";
   VideoPlay videoPlay = new VideoPlay()
   videoPlay.setSourcePlay(filePath);
   videoPlay.startPlay();