vue2项目 静态资源里面有两段音频 第一段音频播放完成4秒之后播放第二段音频 三秒之后再播放第一段音频 如何实现 在120秒内以这样的频率重复播放这两段音频

Question

vue2项目 静态资源里面有两段音频 第一段音频播放完成4秒之后播放第二段音频 三秒之后再播放第一段音频 如何实现 在120秒内以这样的频率重复播放这两段音频？两段音频的时长都是1秒

Answer 1

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/1061129
• 这篇博客也不错, 你可以看下【Vue】如何更好的封装组件？几个小技巧助你成为组件封装达人，让我们封装的组件更加优雅易用
• 除此之外, 这篇博客: vue 组件递归方法中的 遇到那种嵌套层数不知道的数据 很头疼的，目前为了解决头疼的方法就是vue组件递归方法。说白了就是自己调用自己。下面的案例是vue3语法环境，复制粘贴可以在调整到vue2的环境，代码直接复制使用。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  child.vue

  <template>
      <div :style="{paddingLeft: level  * 20 + 'px' }">
          <div class="Title">{{ options.title }}</div>
          <child class="children" v-for="(item,index) in options.children" :index="index" :level="level + 1"
              :options="item"></child>
      </div>
  </template>
  <script setup>
  
  const props = defineProps({
      index: {
          type: Number,
          default: 0,
      },
      level: {
          type: Number,
          default: 0,
      },
      options: {
          type: Object,
          default: () => {
              return {
                  children: []
              }
          }
      }
  })
  
  
  </script>
  <style lang="less" scoped>
  
  </style>
  

  parent.vue

  <template>
      <childVue v-for="(item,index) in Treelist" :options="item" :level="0" />
  </template>
  <script setup>
  import { ref } from 'vue';
  import childVue from './child.vue';
  
  const Treelist = ref([{
      title: 'A', children: [
          { title: 'A-A', children: [{ title: 'A-A-A', children: [] }, { title: 'A-A-B', children: [] }, { title: 'A-A-C', children: [] },] },
          { title: 'A-B', children: [{ title: 'A-B-A', children: [] }, { title: 'A-B-B', children: [] }, { title: 'A-B-C', children: [] },] },
          { title: 'A-C', children: [{ title: 'A-C-A', children: [] }, { title: 'A-C-B', children: [] }, { title: 'A-C-C', children: [] },] },
      ]
  }, {
      title: 'B', children: [
          { title: 'B-A', children: [{ title: 'B-A-A', children: [] }, { title: 'B-A-B', children: [] }, { title: 'B-A-C', children: [] },] },
          { title: 'B-B', children: [{ title: 'B-B-A', children: [] }, { title: 'B-B-B', children: [] }, { title: 'B-B-C', children: [] },] },
          { title: 'B-C', children: [{ title: 'B-C-A', children: [] }, { title: 'B-C-B', children: [] }, { title: 'B-C-C', children: [] },] }
      ]
  }]);
  
  
  
  </script>
  
  <style lang="less" scoped>
  
  </style>
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^