ionic4之如何让你的app可以播放mp3文件？

最新推荐文章于 2022-04-29 09:47:35 发布

原创

最新推荐文章于 2022-04-29 09:47:35 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #播放音频

本文介绍了在Ionic4中实现音频播放的功能，从原生JavaScript实现开始，逐步转换为TypeScript。文章详细阐述了遇到的问题，如MP3文件路径设置、HTML的事件处理、SCSS样式迁移以及TS中的变量定义。通过这个过程，作者对Ionic的文件结构和JS-TS转换有了更深的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能展示

当点击绿色框播放音乐，当再次点击可以暂停，与此同时喇叭跟着动。当然喇叭动的时候也是有声音的，只有贫僧能听到。

图片很丑别怪我，我只是个小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