目录
功能展示
当点击绿色框播放音乐,当再次点击可以暂停,与此同时喇叭跟着动。当然喇叭动的时候也是有声音的,只有贫僧能听到。
图片很丑别怪我,我只是个小Demo。
从头道来
小僧和同伴今天接到了一个技术研究 。那就是如何在ionic上播放音频。很多人在学习js的时候都学过做简单的音乐播放器,我们的实现思路也是先用js实现一个播放/暂停音乐的小呆毛,然后把这js文件转换成ts文件。在ionic上实现播放/暂停音乐的效果。
在做之前也没认为这个功能简单, 因为以前没搞过类似的。不过实现后发现这个例子js-ts有大坑,希望读者可以从坑上迈过去。
原生js实现播放音乐
我的同伴很强势,一会就把js播放器搞出来了。代码如下:
简单和读者解释下,第一部分<script>里面的代码是实现切换播放/暂停;下面的.voice之类的播放音乐时控制喇叭动的css样式;最后<body>里面的内容是布局和mp3路径。(顺便说一下,MP3文件直接放在桌面上就可以直接体验到音乐播放器的效果)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript">
function playPause(){
var myAudio = document.getElementById('myaudio');
var myDiv = document.getElementById('mydiv');
if(myAudio.paused){
myAudio.play();
myAudio.className='voicePlay';
myDiv.classList.add("bg","voicePlay");
}else{
myAudio.pause();
myDiv.classList.remove("bg","voicePlay");
myDiv.classList.add("bg","voicePause");
}
}
</script>
<style type="text/css">
.voice{
padding-top: 12px;
padding-left: 10px;
margin: 100px auto;
height: 35px;
width: 150px;
background: #1bbc9b;
border-radius: 0 7px 7px;
}
.bg {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHR