devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+科大讯飞语音听写功能(解决针对vue new Worker报错问题)_vue项目使用讯飞在线语音合成

作者：我家自动化 | 2024-04-15 00:03:49

赞

踩

vue项目使用讯飞在线语音合成

参考1：vue+科大讯飞语音听写功能(解决针对vue new Worker报错问题)_Other world的博客-CSDN博客

参考2：vue中使用web worker - Gerryli - 博客园

 参考3：将PC浏览器、ZOOM等软件正在播放的音频实时转成文字！讯飞语音输入法的妙用 - 知乎

1.查看node版本，本人如下：

本人项目目录，主要用到的画红色圈圈的三个文件

2.添加 package.json 文件版本：

  1. "dependencies": {
  2.     enc": "^0.4.0",
  3.     "jquery": "^3.4.1",
  4.     
  5. },
  6. "devDependencies": {
  7.     "crypto-js": "^4.0.0",
  8.     "vconsole": "^3.3.4",
  9.     "vue-template-compiler": "2.6.12",
  10.     "worker-loader": "^2.0.0"
  11. }

3. 配置 vue.config.js 文件

 不配置会报错 TypeError: _transcodeWorker.default is not a constructor

 vue.config.js要添加以下配置：

  1. configureWebpack: config => {
  2.     config.module.rules.push({
  3.       test: /\.worker.js$/,
  4.       use: {
  5.         loader: 'worker-loader',
  6.         options: { inline: true, name: 'workerName.[hash].js' }
  7.       }
  8.     })
  9.   },
  10.  
  11. 或（因本人配置不是函数模式，采用的是以下对象模式配置）：
  12.  
  13. chainWebpack(config) {
  14.     config.output.globalObject('this')
  15.  
  16.     config.module
  17.       .rule('worker')
  18.       .test(/\.worker.js$/)
  19.       .use('worker-loader')
  20.       .loader('worker-loader')
  21.       .options({ inline: true, name: 'workerName.[hash].js' })
  22.  
  23. }

在你运行时候,会发现控制台会报错，“window is undefined”，这个是因为worker线程中不存在window对象，因此不能直接使用，要用this代替，要在vue.config.js中添加以下配置

  1. chainWebpack: config => {
  2.     config.output.globalObject('this')
  3.  }

打包的时候报错就加上:

parallel: false

合成一起就是

  1. module.exports = {
  2.   configureWebpack: config => {
  3.     config.module.rules.push({
  4.       test: /\.worker.js$/,
  5.       use: {
  6.         loader: 'worker-loader',
  7.         options: { inline: true, name: 'workerName.[hash].js' }
  8.       }
  9.     })
  10.   },
  11.   parallel: false,
  12.   chainWebpack: config => {
  13.     config.output.globalObject('this')
  14.   }
  15. }

配置完后你会发现不会报错了，然后就可以正常运行了!

3. 创建 transcode.worker.js 文件 ，（在 语音听写流式API demo js语言 讯飞源文件中取）

  1. // (function(){
  2. self.onmessage = function(e){
  3.   transAudioData.transcode(e.data)
  4. }
  5. let transAudioData = {
  6.   transcode(audioData) {
  7.     let output = transAudioData.to16kHz(audioData)
  8.     output = transAudioData.to16BitPCM(output)
  9.     output = Array.from(new Uint8Array(output.buffer))
  10.     self.postMessage(output)
  11.     // return output
  12.   },
  13.   to16kHz(audioData) {
  14.     var data = new Float32Array(audioData)
  15.     var fitCount = Math.round(data.length * (16000 / 44100))
  16.     var newData = new Float32Array(fitCount)
  17.     var springFactor = (data.length - 1) / (fitCount - 1)
  18.     newData[0] = data[0]
  19.     for (let i = 1; i < fitCount - 1; i++) {
  20.       var tmp = i * springFactor
  21.       var before = Math.floor(tmp).toFixed()
  22.       var after = Math.ceil(tmp).toFixed()
  23.       var atPoint = tmp - before
  24.       newData[i] = data[before] + (data[after] - data[before]) * atPoint
  25.     }
  26.     newData[fitCount - 1] = data[data.length - 1]
  27.     return newData
  28.   },
  29.   to16BitPCM(input) {
  30.     var dataLength = input.length * (16 / 8)
  31.     var dataBuffer = new ArrayBuffer(dataLength)
  32.     var dataView = new DataView(dataBuffer)
  33.     var offset = 0
  34.     for (var i = 0; i < input.length; i++, offset += 2) {
  35.       var s = Math.max(-1, Math.min(1, input[i]))
  36.       dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)
  37.     }
  38.     return dataView
  39.   },
  40. }
  41. // })()

4. 创建 translation.js 文件 ，（在 语音听写流式API demo js语言 讯飞源文件中取 src\pages\index\index.js）

  1.  
  2. import CryptoJS from 'crypto-js'
  3. import Enc from 'enc'
  4. import VConsole from 'vconsole'
  5. import $ from 'jquery'
  6. import TransWorker from './js/transcode.worker.js'
  7. import './index.css'
  8.  
  9. let transWorker = new TransWorker()
  10. //APPID，APISecret，APIKey在控制台-我的应用-语音听写（流式版）页面获取
  11. const APPID = 'd7b51bcb'
  12. const API_SECRET = 'ZTNmZjk3N2FkZTljZjg0YTYzMGZiNmZj'
  13. const API_KEY = '4bc26e6fd3868195919a8c14054eac66'
  14.  
  15. /**
  16.  * 获取websocket url
  17.  * 该接口需要后端提供，这里为了方便前端处理
  18.  */
  19. function getWebSocketUrl() {
  20.   return new Promise((resolve, reject) => {
  21.     // 请求地址根据语种不同变化
  22.     var url = 'wss://iat-api.xfyun.cn/v2/iat'
  23.     var host = 'iat-api.xfyun.cn'
  24.     var apiKey = API_KEY
  25.     var apiSecret = API_SECRET
  26.     var date = new Date().toGMTString()
  27.     var algorithm = 'hmac-sha256'
  28.     var headers = 'host date request-line'
  29.     var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`
  30.     var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret)
  31.     var signature = CryptoJS.enc.Base64.stringify(signatureSha)
  32.     var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`
  33.     var authorization = btoa(authorizationOrigin)
  34.     url = `${url}?authorization=${authorization}&date=${date}&host=${host}`
  35.     resolve(url)
  36.   })
  37. }
  38. class IatRecorder {
  39.   constructor({ language, accent, appId } = {}) {
  40.     let self = this
  41.     this.status = 'null'
  42.     this.language = language || 'zh_cn'
  43.     this.accent = accent || 'mandarin'
  44.     this.appId = appId || APPID
  45.     // 记录音频数据
  46.     this.audioData = []
  47.     // 记录听写结果
  48.     this.resultText = ''
  49.     // wpgs下的听写结果需要中间状态辅助记录
  50.     this.resultTextTemp = ''
  51.     transWorker.onmessage = function (event) {
  52.       self.audioData.push(...event.data)
  53.     }
  54.   }
  55.   // 修改录音听写状态
  56.   setStatus(status) {
  57.     this.onWillStatusChange && this.status !== status && this.onWillStatusChange(this.status, status)
  58.     this.status = status
  59.   }
  60.   setResultText({ resultText, resultTextTemp } = {}) {
  61.     this.onTextChange && this.onTextChange(resultTextTemp || resultText || '')
  62.     resultText !== undefined && (this.resultText = resultText)
  63.     resultTextTemp !== undefined && (this.resultTextTemp = resultTextTemp)
  64.   }
  65.   // 修改听写参数
  66.   setParams({ language, accent } = {}) {
  67.     language && (this.language = language)
  68.     accent && (this.accent = accent)
  69.   }
  70.   // 连接websocket
  71.   connectWebSocket() {
  72.     return getWebSocketUrl().then(url => {
  73.       console.log(url)
  74.       let iatWS
  75.       if ('WebSocket' in window) {
  76.         iatWS = new WebSocket(url)
  77.       } else if ('MozWebSocket' in window) {
  78.         iatWS = new MozWebSocket(url)
  79.       } else {
  80.         alert('浏览器不支持WebSocket')
  81.         return
  82.       }
  83.       this.webSocket = iatWS
  84.       this.setStatus('init')
  85.       iatWS.onopen = e => {
  86.         this.setStatus('ing')
  87.         // 重新开始录音
  88.         setTimeout(() => {
  89.           this.webSocketSend()
  90.         }, 100)
  91.       }
  92.       iatWS.onmessage = e => {
  93.         this.result(e.data)
  94.       }
  95.       iatWS.onerror = e => {
  96.         this.recorderStop()
  97.       }
  98.       iatWS.onclose = e => {
  99.         this.recorderStop()
  100.       }
  101.     })
  102.   }
  103.   // 初始化浏览器录音
  104.   recorderInit() {
  105.     navigator.getUserMedia =
  106.       navigator.getUserMedia ||
  107.       navigator.webkitGetUserMedia ||
  108.       navigator.mozGetUserMedia ||
  109.       navigator.msGetUserMedia
  110.  
  111.     // 创建音频环境
  112.     try {
  113.       this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
  114.       this.audioContext.resume()
  115.       if (!this.audioContext) {
  116.         alert('浏览器不支持webAudioApi相关接口')
  117.         return
  118.       }
  119.     } catch (e) {
  120.       if (!this.audioContext) {
  121.         alert('浏览器不支持webAudioApi相关接口')
  122.         return
  123.       }
  124.     }
  125.  
  126.     // 获取浏览器录音权限
  127.     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  128.       navigator.mediaDevices
  129.         .getUserMedia({
  130.           audio: true,
  131.           video: false,
  132.         })
  133.         .then(stream => {
  134.           getMediaSuccess(stream)
  135.         })
  136.         .catch(e => {
  137.           getMediaFail(e)
  138.         })
  139.     } else if (navigator.getUserMedia) {
  140.       navigator.getUserMedia(
  141.         {
  142.           audio: true,
  143.           video: false,
  144.         },
  145.         stream => {
  146.           getMediaSuccess(stream)
  147.         },
  148.         function(e) {
  149.           getMediaFail(e)
  150.         }
  151.       )
  152.     } else {
  153.       if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
  154.         alert('chrome下获取浏览器录音功能，因为安全性问题，需要在localhost或127.0.0.1或https下才能获取权限')
  155.       } else {
  156.         alert('无法获取浏览器录音功能，请升级浏览器或使用chrome')
  157.       }
  158.       this.audioContext && this.audioContext.close()
  159.       return
  160.     }
  161.     // 获取浏览器录音权限成功的回调
  162.     let getMediaSuccess = stream => {
  163.       console.log('getMediaSuccess')
  164.       // 创建一个用于通过JavaScript直接处理音频
  165.       this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1)
  166.       this.scriptProcessor.onaudioprocess = e => {
  167.         // 去处理音频数据
  168.         if (this.status === 'ing') {
  169.           transWorker.postMessage(e.inputBuffer.getChannelData(0))
  170.         }
  171.       }
  172.       // 创建一个新的MediaStreamAudioSourceNode 对象，使来自MediaStream的音频可以被播放和操作
  173.       this.mediaSource = this.audioContext.createMediaStreamSource(stream)
  174.       // 连接
  175.       this.mediaSource.connect(this.scriptProcessor)
  176.       this.scriptProcessor.connect(this.audioContext.destination)
  177.       this.connectWebSocket()
  178.     }
  179.  
  180.     let getMediaFail = (e) => {
  181.       alert('请求麦克风失败')
  182.       console.log(e)
  183.       this.audioContext && this.audioContext.close()
  184.       this.audioContext = undefined
  185.       // 关闭websocket
  186.       if (this.webSocket && this.webSocket.readyState === 1) {
  187.         this.webSocket.close()
  188.       }
  189.     }
  190.   }
  191.   recorderStart() {
  192.     if (!this.audioContext) {
  193.       console.log("11111111")
  194.       this.recorderInit()
  195.     } else {
  196.       console.log("22222222")
  197.       this.audioContext.resume()
  198.       this.connectWebSocket()
  199.     }
  200.   }
  201.   // 暂停录音
  202.   recorderStop() {
  203.     // safari下suspend后再次resume录音内容将是空白，设置safari下不做suspend
  204.     if (!(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgen))){
  205.       this.audioContext && this.audioContext.suspend()
  206.     }
  207.     this.setStatus('end')
  208.   }
  209.   // 处理音频数据
  210.   // transAudioData(audioData) {
  211.   //   audioData = transAudioData.transaction(audioData)
  212.   //   this.audioData.push(...audioData)
  213.   // }
  214.   // 对处理后的音频数据进行base64编码，
  215.   toBase64(buffer) {
  216.     var binary = ''
  217.     var bytes = new Uint8Array(buffer)
  218.     var len = bytes.byteLength
  219.     for (var i = 0; i < len; i++) {
  220.       binary += String.fromCharCode(bytes[i])
  221.     }
  222.     return window.btoa(binary)
  223.   }
  224.   // 向webSocket发送数据
  225.   webSocketSend() {
  226.     if (this.webSocket.readyState !== 1) {
  227.       return
  228.     }
  229.     let audioData = this.audioData.splice(0, 1280)
  230.     console.log(audioData)
  231.     var params = {
  232.       common: {
  233.         app_id: this.appId,
  234.       },
  235.       business: {
  236.         language: this.language, //小语种可在控制台--语音听写（流式）--方言/语种处添加试用
  237.         domain: 'iat',
  238.         accent: this.accent, //中文方言可在控制台--语音听写（流式）--方言/语种处添加试用
  239.         vad_eos: 60*60*1000,
  240.         dwa: 'wpgs', //为使该功能生效，需到控制台开通动态修正功能（该功能免费）
  241.       },
  242.       data: {
  243.         status: 0,
  244.         format: 'audio/L16;rate=16000',
  245.         encoding: 'raw',
  246.         audio: this.toBase64(audioData),
  247.       },
  248.     }
  249.     this.webSocket.send(JSON.stringify(params))
  250.     this.handlerInterval = setInterval(() => {
  251.       // websocket未连接
  252.       if (this.webSocket.readyState !== 1) {
  253.         console.log("websocket未连接")
  254.         this.audioData = []
  255.         clearInterval(this.handlerInterval)
  256.         return
  257.       }
  258.       if (this.audioData.length === 0) {
  259.         console.log("自动关闭",this.status)
  260.         if (this.status === 'end') {
  261.           this.webSocket.send(
  262.             JSON.stringify({
  263.               data: {
  264.                 status: 2,
  265.                 format: 'audio/L16;rate=16000',
  266.                 encoding: 'raw',
  267.                 audio: '',
  268.               },
  269.             })
  270.           )
  271.           this.audioData = []
  272.           clearInterval(this.handlerInterval)
  273.         }
  274.         return false
  275.       }
  276.       audioData = this.audioData.splice(0, 1280)
  277.       // 中间帧
  278.       this.webSocket.send(
  279.         JSON.stringify({
  280.           data: {
  281.             status: 1,
  282.             format: 'audio/L16;rate=16000',
  283.             encoding: 'raw',
  284.             audio: this.toBase64(audioData),
  285.           },
  286.         })
  287.       )
  288.     }, 40)
  289.   }
  290.   result(resultData) {
  291.     // 识别结束
  292.     let jsonData = JSON.parse(resultData)
  293.     if (jsonData.data && jsonData.data.result) {
  294.       let data = jsonData.data.result
  295.       let str = ''
  296.       let resultStr = ''
  297.       let ws = data.ws
  298.       for (let i = 0; i < ws.length; i++) {
  299.         str = str + ws[i].cw[0].w
  300.       }
  301.       console.log("识别的结果为：",str)
  302.       // 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
  303.       // 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
  304.       if (data.pgs) {
  305.         if (data.pgs === 'apd') {
  306.           // 将resultTextTemp同步给resultText
  307.           this.setResultText({
  308.             resultText: this.resultTextTemp,
  309.           })
  310.         }
  311.         // 将结果存储在resultTextTemp中
  312.         this.setResultText({
  313.           resultTextTemp: this.resultText + str,
  314.         })
  315.       } else {
  316.         this.setResultText({
  317.           resultText: this.resultText + str,
  318.         })
  319.       }
  320.     }
  321.     if (jsonData.code === 0 && jsonData.data.status === 2) {
  322.       this.webSocket.close()
  323.     }
  324.     if (jsonData.code !== 0) {
  325.       this.webSocket.close()
  326.       console.log(`${jsonData.code}:${jsonData.message}`)
  327.     }
  328.   }
  329.   start() {
  330.     this.recorderStart()
  331.     this.setResultText({ resultText: '', resultTextTemp: '' })
  332.   }
  333.   stop() {
  334.     this.recorderStop()
  335.   }
  336. }
  337.  
  338. // ======================开始调用=============================
  339. var vConsole = new VConsole()
  340. let iatRecorder = new IatRecorder()
  341. let countInterval
  342. // 状态改变时处罚
  343. iatRecorder.onWillStatusChange = function(oldStatus, status) {
  344.   // 可以在这里进行页面中一些交互逻辑处理：倒计时（听写只有60s）,录音的动画，按钮交互等
  345.   // 按钮中的文字
  346.   let text = {
  347.     null: '开始识别', // 最开始状态
  348.     init: '开始识别', // 初始化状态
  349.     ing: '结束识别', // 正在录音状态
  350.     end: '开始识别', // 结束状态
  351.   }
  352.   let senconds = 0
  353.   $('.taste-button')
  354.     .removeClass(`status-${oldStatus}`)
  355.     .addClass(`status-${status}`)
  356.     .text(text[status])
  357.   if (status === 'ing') {
  358.     $('hr').addClass('hr')
  359.     $('.taste-content').css('display', 'none')
  360.     $('.start-taste').addClass('flex-display-1')
  361.     // 倒计时相关
  362.     countInterval = setInterval(()=>{
  363.       senconds++
  364.       console.log("==========="+senconds)
  365.       $('.used-time').text(`0${Math.floor(senconds/60)}：${Math.floor(senconds/10)}${senconds%10}`)
  366.       /*if (senconds >= 60) {
  367.         this.stop()
  368.         clearInterval(countInterval)
  369.       }*/
  370.     }, 1000)
  371.   } else if (status === 'init') {
  372.     $('.time-box').show()
  373.     $('.used-time').text('00：00')
  374.   } else {
  375.     $('.time-box').hide()
  376.     $('hr').removeClass('hr')
  377.     clearInterval(countInterval)
  378.   }
  379. }
  380.  
  381.  
  382. $(function () {
  383. // 监听识别结果的变化
  384.   iatRecorder.onTextChange = function(text) {
  385.     $('#result_output').text(text)
  386.   }
  387.   $('#taste_button, .taste-button').click(function() {
  388.     if (iatRecorder.status === 'ing') {
  389.       iatRecorder.stop()
  390.     } else {
  391.       iatRecorder.start()
  392.     }
  393.   })
  394.  
  395. });
  396.

5. 创建 translation.vue 文件 ，（在 语音听写流式API demo js语言 讯飞源文件中取 src\pages\index\index.html）

  1. <template>
  2.   <div class="service-item service-item-taste">
  3.     <h2 class="service-item-title">产品体验-语音听写（流式版）WebAPI</h2>
  4.     <a href="/doc" target="_blank">demo文档说明</a>
  5.     <div class="service-item-content service-item-taste-content">
  6.       <div class="taste-content">
  7.         <button class="taste-button ready-button" id="taste_button">开始识别</button>
  8.       </div>
  9.       <div class="start-taste">
  10.         <div class="start-taste-left">
  11.           <div class="time-box">
  12.             <span class="start-taste-line">
  13.               <hr class="hr hr1">
  14.               <hr class="hr hr2">
  15.               <hr class="hr hr3">
  16.               <hr class="hr hr4">
  17.               <hr class="hr hr5">
  18.               <hr class="hr hr6">
  19.               <hr class="hr hr7">
  20.               <hr class="hr hr8">
  21.               <hr class="hr hr9">
  22.               <hr class="hr hr10">
  23.             </span>
  24.             <span class="total-time"><span class="used-time">00: 00</span> / 01: 00</span>
  25.           </div>
  26.           <div class="start-taste-button">
  27.             <button class="taste-button start-button">结束识别</button>
  28.           </div>
  29.         </div>
  30.         <div class="output-box" id="result_output"></div>
  31.       </div>
  32.     </div>
  33.   </div>
  34.  
  35. </template>
  36. <script>
  37.  
  38.  
  39. import translation from './translation.js'
  40.  
  41. export default {
  42.   name: 'translation',
  43.   data() {
  44.     return {
  45.       phone: '',
  46.     }
  47.   },
  48.   // mixins: [translation],
  49.   created() {
  50.     // transWorker
  51.     // translation.transW
  52.   },
  53.   mounted() {
  54.   },
  55.   methods: {
  56.  
  57.   },
  58.   destroyed() {
  59.  
  60.   },
  61. }
  62.  
  63. </script>
  64.  
  65. <style >
  66. .service-item-taste button {
  67.   cursor: pointer;
  68. }
  69.  
  70. .service-item-taste .taste-button {
  71.   background: #187cff;
  72.   border: 1px solid;
  73.   border-color: #478eea;
  74.   color: #fff;
  75.   text-align: center;
  76.   border-radius: 3px;
  77. }
  78.  
  79. .service-item-taste .taste-header .dialect-select {
  80.   margin-left: 20px;
  81.   height: 26px;
  82. }
  83.  
  84. .service-item-taste .taste-header .dialect {
  85.   margin-left: 20px;
  86.   height: 26px;
  87.   line-height: 26px;
  88.   display: none;
  89. }
  90.  
  91. .service-item-taste .taste-header a {
  92.   border: none;
  93.   border-radius: 4px;
  94.   color: #fff;
  95.   height: 26px;
  96.   width: 100px;
  97.   float: right;
  98.   text-align: center;
  99.   line-height: 26px;
  100. }
  101.  
  102. .service-item-taste .taste-content {
  103.   display: -ms-flexbox;
  104.   display: flex;
  105.   -ms-flex-align: center;
  106.   align-items: center;
  107.   margin-top: 100px;
  108. }
  109.  
  110. .service-item-taste .start-taste {
  111.   margin-top: 30px;
  112.   display: none;
  113.   -ms-flex-pack: justify;
  114.   justify-content: space-between;
  115. }
  116. .service-item-taste .start-taste.flex-display-1{
  117.   display: flex;
  118. }
  119.  
  120. .service-item-taste .start-taste .start-taste-left {
  121.   width: 40%;
  122.   margin-left: 30px;
  123. }
  124.  
  125. .service-item-taste .start-taste .start-taste-left .time-box {
  126.   margin-top: 40px;
  127.   display: -ms-flexbox;
  128.   display: flex;
  129.   -ms-flex-pack: center;
  130.   justify-content: center;
  131. }
  132.  
  133. .service-item-taste .start-taste .start-taste-left .time-box .total-time {
  134.   margin-left: 20px;
  135. }
  136.  
  137. .service-item-taste .start-taste .start-taste-left .time-box .start-taste-line {
  138.   display: inline-block;
  139.   margin-right: 20px;
  140. }
  141.  
  142. .service-item-taste .start-taste .start-taste-left .time-box .start-taste-line hr {
  143.   background-color: #187cff;
  144.   width: 3px;
  145.   height: 10px;
  146.   margin: 0 5px;
  147.   display: inline-block;
  148.   border: none;
  149. }
  150.  
  151. .service-item-taste .start-taste .start-taste-left .start-taste-button {
  152.   display: -ms-flexbox;
  153.   display: flex;
  154.   margin-top: 70px;
  155. }
  156.  
  157. .service-item-taste .start-taste .output-box {
  158.   height: 200px;
  159.   overflow: auto;
  160.   background: #f0f0f0;
  161.   width: 50%;
  162.   line-height: 1.5;
  163.   padding-left: 10px;
  164.   padding-top: 10px;
  165. }
  166.  
  167. .hr {
  168.   animation: note 0.2s ease-in-out;
  169.   animation-iteration-count: infinite;
  170.   animation-direction: alternate;
  171. }
  172.  
  173. .hr1 {
  174.   animation-delay: -1s;
  175. }
  176.  
  177. .hr2 {
  178.   animation-delay: -0.9s;
  179. }
  180.  
  181. .hr3 {
  182.   animation-delay: -0.8s;
  183. }
  184.  
  185. .hr4 {
  186.   animation-delay: -0.7s;
  187. }
  188.  
  189. .hr5 {
  190.   animation-delay: -0.6s;
  191. }
  192.  
  193. .hr6 {
  194.   animation-delay: -0.5s;
  195. }
  196.  
  197. .hr7 {
  198.   animation-delay: -0.4s;
  199. }
  200.  
  201. .hr8 {
  202.   animation-delay: -0.3s;
  203. }
  204.  
  205. .hr9 {
  206.   animation-delay: -0.2s;
  207. }
  208.  
  209. .hr10 {
  210.   animation-delay: -0.1s;
  211. }
  212.  
  213. @keyframes note {
  214.   from {
  215.     transform: scaleY(1);
  216.   }
  217.   to {
  218.     transform: scaleY(4);
  219.   }
  220. }
  221.  
  222. .ready-button,
  223. .start-button {
  224.   margin: 0 auto;
  225.   height: 40px;
  226.   width: 160px;
  227.   font-size: 16px;
  228.   letter-spacing: 6px;
  229. }
  230.  
  231. .taste-button:hover {
  232.   background: #0b99ff;
  233. }
  234. </style>

测试成功

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号