文字+音频交互设计与技术实现

       文字与音频的组合交互无论是PC端还是移动端都是一个传统的、经典的交互方式，唤醒的是人的视觉与听觉能力与感受。应用场景也特别多，比如有声小说，歌曲与歌词等。而自己为解决个人生活中的一个问题而开发的这个简单的APP ,也算是文字与音频的典型应用场景。

       一直以来对自己的普通话不标准而感到烦恼，最近终于下定决心要好好的练习普通话，于是找来了很多文章和配套音频，但文章和音频是分开的，练习的时候的先打开文章，然后再通过音频播放器播放配套音频。即使在音乐播放器中播放音频，但因为文章也不是歌词形式，也做不到我想要的同步。于是自己开发了一个简单的APP，以满足自己打开APP后边看文章，边听文章朗读音频。至于测试自己普通话是否有进步等需求，可能还需要开发录音与比对等功能，那就是后话了。

交互效果：

 

技术实现：

       实现这个效果大致可分成两块，一是文章的显示，二是配套音频的播放控制。为此需要先准备好文章文件和音频文件。需要注意的是我的文章是通过*.txt文本文件存放且存放的编码格式是utf-8（另存为中可以选择对应的编码格式），不注意这个问题可能获取到的文章在项目中会出现乱码问题。音频文件一定要是Android系统支持的格式，比如*.mp3、*.m4a等。

1、文章显示

(1)文章的存放与内容获取问题

       文章可存放到项目中的assets资产目录中，也可以作为资源存放到res/raw目录下，不同的存放方式使得获取文章数据的方式有些不同。具体介绍如下：

    a)存放到assets目录：

        AssetManager am = getAssets();//获取资产管理器类

        InputStream is = am.open("circle.txt");//打开指定文章名的输入流，其中circle.txt是文章名，需要带后缀名。

    b)存放到res/raw目录：

      //获取资源管理器，然后打开指定资源id的输入流，其中R.raw.circle是文章的资源id。

      InputStream is =getResources().openRawResource(R.raw.circle);

     说明：这两种方式各有优缺点而一但获取到对应的输入流，之后的操作就是JavaIO处理了。

(2)文章数据的显示

       文章数据的显示可以使用TextView控件，但TextView要显示的数据需要是字符串的，所以需要把输入流转化成字符串才好再通过TextView的setText()方法显示到TextView控件上。并且由于文章的显示可能超过一屏，默认情况下一屏之后的内容会看不到，所以最好使用ScrollView包裹一下TextView，使其具有滑动功能，以方便用户查看一屏之后的内容，具体布局与逻辑实现代码如下：

       a)布局实现部分：

      <ScrollView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_below="@id/rl_title"

        android:scrollbars="none">

        <TextView

            android:id="@+id/tv_circle"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginLeft="5dp"

            android:layout_marginRight="5dp"