nuxt.js框架中 audio标签的坑

最新推荐文章于 2025-02-19 00:17:56 发布

汁源

最新推荐文章于 2025-02-19 00:17:56 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 nuxt audio ios h5 vue

本文链接：https://blog.youkuaiyun.com/qq_41108402/article/details/89102303

一、前言

上星期接到一个需求，业主说要在移动端的考试系统中弄一个背景音乐上去，让人听着做题更舒服，并且做对题目和做错题目都需要有不同的音乐提示（业主不当产品经理留在小公司折磨我这种小员工实属浪费）。于是就想到用html5的audio标签。但是后来做的时候发现，audio标签在IOS（苹果）端的微信浏览器中存在着很多坑，而且要整合到nuxt.js当中又踩了坑，决定把这些坑和解决办法记下来。

二、第一坑——nuxt.config.js的配置

本以为直接放audio标签进去.vue文件中就完事了，结果报了下图的错。

明知道是缺了某个loader，但是又不知道怎么配置，后来参照着vue-cli对mp3的配置，如下图

这里不作多说，参照着这个配置，我在nuxt.config.js文件中配置了对mp3文件的处理方法

build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      // Run ESLint on save
      const vueLoader = config.module.rules.find((loader) => loader.loader === 'vue-loader');
     /* 把audio标签在编译时转成src属性 */
      vueLoa