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

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

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

目录

功能展示

从头道来

原生js实现播放音乐

js-ts修改之路

收获


 

 

功能展示


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

图片很丑别怪我,我只是个小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
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值