返回

读绘本APP设计的启蒙密码

IOS

上一篇文章我们已经完成了下载和解压的工作，现在让我们开始对解压后的文件进行处理。读绘本其实就是一张图片配一个音频，滑动到哪张图片就播放哪个音频。

1. 文件夹结构

解压后的文件夹结构如下：

- assets
  - images
  - sounds
- index.html
- style.css

其中，assets文件夹包含图片和音频文件，index.html是主页面，style.css是样式表。

2. 主页面

index.html是主页面，它的内容如下：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <div id="book">
      <img src="assets/images/page1.png" alt="Page 1">
      <audio src="assets/sounds/page1.mp3" autoplay></audio>
    </div>
    <div id="controls">
      <button id="prev">上一页</button>
      <button id="next">下一页</button>
    </div>
  </div>
</body>
</html>

这个页面包含一个容器（container）、一本绘本（book）和一个控制面板（controls）。绘本包含一个图片（img）和一个音频（audio），控制面板包含两个按钮（prev和next）。

3. 样式表

style.css是样式表，它的内容如下：

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#book {
  width: 600px;
  height: 400px;
  overflow: hidden;
}

#book img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#controls button {
  width: 100px;
  height: 50px;
  margin: 0 10px;
  background-color: #ccc;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#controls button:hover {
  background-color: #ddd;
}

这个样式表定义了页面的样式，包括字体、布局、颜色等。

4. 交互逻辑

接下来，我们需要编写交互逻辑。

// 获取元素
const book = document.getElementById('book');
const prev = document.getElementById('prev');
const next = document.getElementById('next');

// 当前页码
let currentPage = 1;

// 总页数
const totalPages = 10;

// 图片路径数组
const images = [
  'assets/images/page1.png',
  'assets/images/page2.png',
  'assets/images/page3.png',
  'assets/images/page4.png',
  'assets/images/page5.png',
  'assets/images/page6.png',
  'assets/images/page7.png',
  'assets/images/page8.png',
  'assets/images/page9.png',
  'assets/images/page10.png',
];

// 音频路径数组
const sounds = [
  'assets/sounds/page1.mp3',
  'assets/sounds/page2.mp3',
  'assets/sounds/page3.mp3',
  'assets/sounds/page4.mp3',
  'assets/sounds/page5.mp3',
  'assets/sounds/page6.mp3',
  'assets/sounds/page7.mp3',
  'assets/sounds/page8.mp3',
  'assets/sounds/page9.mp3',
  'assets/sounds/page10.mp3',
];

// 播放音频
function playAudio() {
  const audio = document.querySelector(`audio[src="${sounds[currentPage - 1]}"]`);
  audio.play();
}

// 上一页
prev.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    book.innerHTML = `
      <img src="${images[currentPage - 1]}" alt="Page ${currentPage}">
      <audio src="${sounds[currentPage - 1]}" autoplay></audio>
    `;
    playAudio();
  }
});

// 下一页
next.addEventListener('click', () => {
  if (currentPage < totalPages) {
    currentPage++;
    book.innerHTML = `
      <img src="${images[currentPage - 1]}" alt="Page ${currentPage}">
      <audio src="${sounds[currentPage - 1]}" autoplay></audio>
    `;
    playAudio();
  }
});

// 加载第一页
window.addEventListener('load', () => {
  playAudio();
});

这段代码实现了翻页和播放音频的功能。

5. 运行程序

现在，我们可以运行程序了。

cd path/to/directory
python -m http.server 8000

然后，在浏览器中打开http://localhost:8000就可以看到读绘本APP了。