基于VUE3的web实现文本的可调整播放以及背景音乐播放

文本的播放

我设置了一个按钮，再对按钮设置点击事件handleSpeakTest()，<script>内播放文本方法为：

const handleSpeakTest=((text)=>{
  handleSpeak("中国");
})
const handleSpeak=((text:string)=>{
    speech.text = text;
    speech.lang = "zh-CN";
    speech.volume=1;
    speech.pitch =2;
    speech.rate=1;
    synth.speak(speech);
})

对于传入Text的播放，我们可设置不同的播放参数值，具体为：

speech.lang 获取并设置话语的语言（en-US、zh-CN）

speech.pitch 获取并设置话语的音调(值越大越尖锐，range:0-2, default:1, float)

speech.rate 获取并设置说话的速度 (值越大语速越快,range:0.1-10, default:1, float)

speech.text 获取并设置说话时的文本

speech.voice 获取并设置说话的声音

speech.volume 获取并设置说话的音量 (range: 0-1, default:1, float）

音效、音乐的播放

我依然设置了一个点击事件，来测试音效的播放。对于背景音乐的播放，常常是需要一进入页面就自动播放，可以考虑使用生命周期函数进行实现。但此处我还是使用点击事件实现播放与暂停，再对播放的控件进行隐藏。

需要注意，音频资源的地址拼写不要出错！

template下：

  <el-button type="primary" @click="player">调试音乐开</el-button>
  <el-button type="primary" @click="stop">调试音乐关</el-button>
 <audio ref="myAudio" controls style="display: none;">
       <source src="./assets/background.mp3" type="audio/mp3">
 </audio>

srcipt下：

const myAudio=ref(null)
//播放音乐
const player=()=>{
  console.log(myAudio.value)
  myAudio.value.play()
}
//暂停音乐
const stop=()=>{
    myAudio.value.pause()
  }

注意：把audio控件隐藏掉，style="display: none;"

背景音乐播放拓展---图片持续360度旋转

对于网页的背景音乐播放，常常会在网页某个地方设置一个图标一直旋转着，表示音乐正在播放。此处实现该功能使用的是id选择器。

template中:

 <img class="logo_word" id="rotate" alt="music logo" src="./assets/musiclogo.png" @click="stopmusic"/>

style中：

/* 图片旋转 */
#rotate{
width:40px;
height:40px;
border-radius:140px;
-webkit-animation:run 6s linear 0s infinite;
}
#rotate:hover{
-webkit-animation-play-state:paused;
}
@-webkit-keyframes run{
from{
-webkit-transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
}
}

鼠标覆盖到图标时，图标会停止旋转。点击图片时，可设置点击事件stopmusic，事件的写法可仿照前文，使得音乐暂停。

总结

web的交互性很重要，视频音频的播放设计与效果，以及点击按钮会发出的音效，常常能给用户带来更好的体验感。

keep coding