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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Delicious_Life/article/details/91128115

目录

功能展示

从头道来

原生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,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;
    width: 24px;
    height: 24px;
  background-size: 400%;
}

.voicePause {
  animation-name: voicePlay;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

.voicePlay {
  animation-name: voicePlay;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}
</style>
</head>
<body>
<div class="voice" οnclick="playPause()">
  <div id="mydiv" class="bg voicePause" ></div>
</div>
<audio id="myaudio" src=".\山外小楼夜听雨.mp3" controls="controls" loop="false" hidden="true" >
</audio>

</body>
</html>

 

效果如图 

 

js-ts修改之路

 

之后的事情就交给本王了。我从html/ts/scss三个角度来讲解。

  • html文件
<content>
<div class="voice" (click)="playSwitch()">
<div id="mydiv" class="bg voicePause" ></div>
</div>
<audio id="myaudio" src="assets/mp3File/山外小楼夜听雨.mp3" controls="controls" loop="false" hidden="true"></audio>
</content>

1.把js文件中的onclick换成了(click)

2.最主要的是MP3存放的路径问题。可以看到,要把mp3放到了src目录下assets文件夹里。

这里我遇见了一个问题卡了我一上午,因为我做DEMO,所以我把MP3文件随便放了个位置,但是只要不放在assets目录下,都会报如下错误,无法加载。

 

 

  • scss

样式无需更改,把所有样式copy到scss里就可以

.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,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;
      width: 24px;
      height: 24px;
    background-size: 400%;
  }
  
  .voicePause {
    animation-name: voicePlay;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: steps(3);
  }
  
  .voicePlay {
    animation-name: voicePlay;
    animation-duration: 1s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: steps(3);
  }
  
  @keyframes voicePlay {
    0% {
      background-position: 0;
    }
    100% {
      background-position: 100%;
    }
  }

 

 

  • ts文件

这里需要注意的是如何定义变量,this.使用变量以及js文件中的双引号修改为单引号。

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  myAudio: any;
  myDiv: any;

  constructor() {}

  playSwitch() {
    this.myAudio = document.getElementById('myaudio');
    this.myDiv = document.getElementById('mydiv');
    if (this.myAudio.paused) {
      this.myAudio.play();
      this.myAudio.className = 'voicePlay';
      this.myDiv.classList.add('bg', 'voicePlay');
    } else {
      this.myAudio.pause();
      this.myDiv.classList.remove('bg', 'voicePlay');
      this.myDiv.classList.add('bg', 'voicPause');
    }
  }
}

 

 

收获

 

实现后的效果开头已经展示了,这个研究让我对ionic的文件结构有了更近一步的认识,还是就是js-ts这里面也有很多学问,如果不理解直接用工具强转,很可能会报错。

最后说一下,如果我把js文件全盘的复制,粘贴到ionic文件中的html里,这样能实现效果过?我试了一下,没有成功。感兴趣的朋友可以研究下。

 

展开阅读全文

没有更多推荐了,返回首页