vue2.0 结合HTML5原生Audio标签在移动端的使用实现方式，应用场景为钉钉微应用

最新推荐文章于 2024-08-01 17:42:20 发布
最新推荐文章于 2024-08-01 17:42:20 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： vue移动端 文章标签： HTML5 audio vue2.0 钉钉 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38008863/article/details/80076707
版权

在做vue2.0钉钉微应用项目，有需要播放音频的是需求，用阿里云sdk播放器不购买相关服务，音频有些播放不了。于是我就直接用HTML5原生的Audio标签自己写音频播放器。（业务需求：记录上次播放位置并从上次播放位置播放，观看进度不满100%不允许快进，满100%方可快进。）以下是整个业务代码：

CSS部分：

.audio-box{
   height:100%;
   width:100%;
   background:rgba(16,32,56,.9);
   position:relative;
   z-index:3000;
   .audio-name{
        width:100%;
        font-size:.14rem;
        color:#eee;
        position:absolute;
        left:0;           
        top: .30rem;
        text-align:center;
        @include ellipsis();
   }
   .perisphere{
       width:3rem;
       height:3rem;
       background:rgba(255,255,255,.3);
       border-radius:100%;
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;
       position:absolute;
       left:0;
       bottom:0;
       top:0;
       right:0;
       margin:auto;
       z-index:3005;
        @include flexbox();
        @include flex-direction(row);
        @include justify-content(center);
        @include align-items(center);
     .audio-show-img-box{
       width:2.5rem;
       height:2.5rem;
       border-radius:100%;
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;
        @include flexbox();
        @include flex-direction(row);
        @include justify-content(center);
        @include align-items(center);        
       #audio-show-img{
           width:100%;
           height:100%;
           border-radius:100%;
           -moz-border-radius: 100%;
           -webkit-border-radius: 100%;
        }
       
        
    .audio-play-show {
        -webkit-animation: say 12s linear infinite;
        -moz-animation: say 12s linear infinite;
        -ms-animation: say 12s linear infinite;
        -o-animation: say 12s linear infinite;
        animation: say 12s linear infinite;
    }
    
    .audio-pause-show {
        -webkit-animation: stopSay 2s linear infinite;
        -moz-animation: stopSay 2s linear infinite;
        -ms-animation: stopSay 2s linear infinite;
        -o-animation: stopSay 2s linear infinite;
        animation: stopSay 2s linear infinite;
    }
    
    @-webkit-keyframes say {
        0% {}
        100% {
            -webkit-transform: rotateZ(360deg);
        }
    }
    
    @-moz-keyframes say {
        0% {}
        100% {
            -moz-transform: rotateZ(360deg);
        }
    }
    
    @-ms-keyframes say {
        0% {}
        100% {
            -ms-transform: rotateZ(360deg);
        }
    }
    
    @-o-transforms say {
        0% {}
        100% {
            -o-transform: rotateZ(360deg);
        }
    }
    
    @keyframes say {
        0% {}
        100% {
            transform: rotateZ(360deg);
        }
    }
    
    @-webkit-keyframes stopSay {
        0% {}
        100% {
            -webkit-transform: rotateZ(0);
        }
    }
    
    @-moz-keyframes stopSay {
        0% {}
        100% {
            -moz-transform: rotateZ(0);
        }
    }
    
    @-ms-keyframes stopSay {
        0% {}
        100% {
            -ms-transform: rotateZ(0);
        }
    }
    
    @-o-transforms stopSay {
        0% {}
        100% {
            -o-transform: rotateZ(0);
        }
    }
    
    @keyframes stopSay {
        0% {}
        100% {
            transform: rotateZ(0);
        }
    }

       
     }
 
   .audio-play-img-box{
       width:2.5rem;
       height:2.5rem;
       border-radius:100%;
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;      
       position:absolute;
       left:0;
       bottom:0;
       top:0;
       right:0;
       margin:auto;
       z-index:4100;
        @include flexbox();
        @include flex-direction(row);
        @include justify-content(center);
        @include align-items(center);
        display:none;
        .show-play-img{
               height:1rem;
               width:1rem;
               margin:.75rem 0 0 .75rem;
               cursor:pointer;
               
              
       }    
   }
}
   .load-title{
            width:100%;
            font-size:.12rem;
            color:#eee;
            position:absolute;
            left:0;           
            bottom: .54rem;
            text-align:center;
            @include ellipsis();
       }
   .audio-control{
       width:100%;
       height:.44rem;
       background:rgba(0,0,0,.6);
       position:absolute;
       left:0;
       bottom:0;
       z-index:3100;
        @include flexbox();
        @include flex-direction(row);
         @include justify-content(space-around);
        @include align-items(center);
        
       .audio-play-control{
           height:.26rem;
           width:.22rem;
           background:url('../../static/icon-audio-pause.png') no-repeat center center;
           background-size:100% 100%;
           margin-left:.12rem;
           cursor:pointer;
       }
       .size{
             font-size:.12rem;
             color:#fff;
             float: left;
             display: block;
         }
         .timeshow{
             font-size:.12rem;
             color:#fff;
             float: right;
            display: block;
         }
       .right-timeUpdata{
            height:100%;       
            width:2rem;
            @include flexbox();
            @include flex-direction(row);
            @include align-items(center);
           .timeline{               
                height: .04rem;
                width:100%;
                background-color: rgba(256, 256, 256, 0.6);
                border-radius: 5px;
                position: relative;
                z-index: 3100;                
                span{
                    position: relative;
                    width: 0px;
                    height: .04rem;            
                    background: #0188fd;
                    box-shadow: inset 1px 1px 1px 0 rgba(0,0,0,.06);
                    border-radius: .10rem;
                    -moz-border-radius: .10rem;
                    -webkit-border-radius: .10rem;
                    display: block;
                    -webkit-transition: width ease-out 0.3s;
                    -o-transition: width ease-out 0.3s;
                    transition: width ease-out 0.3s;
                }
                span:after{
                    content: "";
                    position: absolute;
                    top: -.05rem;
                    right: 0;
                     width: .12rem;
                     height: .12rem;
                    border-radius: 100%;
                    -moz-border-radius: 100%;
                    -webkit-border-radius: 100%;
                     background: #0188fd;
                }
           }

       }
   }
}

 

HTMl部分：

 

<template>
	<div class="audio-box">
		<audio id="audio" preload="auto"></audio>
		<p class="audio-name"></p>
		<div class="perisphere">
			<div class="audio-show-img-box">
				<img class="images" id="audio-show-img" src="../../../static/icon-audio-show.png" />
			</div>
			<div class="audio-play-img-box" id="audio-play-img-box">
				<img id="show-play-img" class="show-play-img images" src="../../../static/icon-audio-bag-play.png" />
			</div>
		</div>
		<p class="load-title" id="load-title">正在缓冲…</p>
		<div class="audio-control">
			<div class="audio-play-control" id="audio-play-control"></div>
			<span class="size" id="size">00:00</span>
			<div class="right-timeUpdata">
				<p class="timeline" id="timeline"><span id="progress"></span></p>
			</div>
			<span class="timeshow" id="timeshow">00:00</span>
		</div>
	</div>
</template>

js部分：

<script type="text/javascript">
	import axios from 'axios';
	import router from '../../router';
	import { Toast } from 'mint-ui';
	import { global_set } from '../../script/global.js';
	export default {
		data() {
			return {
				planId: this.$route.query.planId, //学习计划id
				courseId: this.$route.query.courseId, //课程id
				token: this.$route.query.access_token,
				resourceId: this.$route.query.resourceId,
				playContent: '',

			}
		},
		created() {

		},
		mounted() {
			axios.get(global_set.host + "/plan/myTask/getSingleResourceProgress", {
					params: {
						access_token: this.token,
						courseId: this.courseId,
						planId: this.planId,
						resourceId: this.resourceId, //加资源id
						timeStamp: Date.parse(new Date()),
					}
				})
				.then((data) => {
					this.playContent = data.data.data;
					var that = this;
					//音频标题设置
					$('.audio-name').html(that.playContent.name)
					/*********************mp3************************/
					that.$nextTick(function() {
					     var onoff = false,
							 audio = document.getElementById('audio'),
							 isPalyControl = document.getElementById('audio-play-control'),
							 showPalyImgBox = document.getElementById('audio-play-img-box'),
							 showPalyImg = document.getElementById('show-play-img'),
							 audioShowImg = document.getElementById('audio-show-img'),
							 timeline = document.getElementById('timeline'),

							 progress=document.getElementById('progress'), //进度条
							 timeshow=document.getElementById('timeshow'), //总时间
							 size=document.getElementById('size'), //时时显示时间
							 loadTitle=document.getElementById('load-title');  //缓冲显示

						//是否允许快进
						var progressBtn = that.playContent.studyProgress;
						//上次播放位置记录
						var recentStart = that.playContent.recentStart;
						audio.src = that.playContent.url;
						audioPlay();
						var button=true;
						audio.addEventListener("canplay",function() {							
							//设置初始播放位置						
							var	 seekable = this.seekable && this.seekable.length > 0;											  	
								if(seekable && button){
									var that=this;		
									  setTimeout(function(){
											 that.currentTime = recentStart;
											 button=false;
										},500)
									 
									 
								}							
							
						});
						//绑定timeupdate事件
						audio.addEventListener('timeupdate', function() {
							//获取当前的播放时刻（单位秒）
							var currentTimes = audio.currentTime;　
							if(!isNaN(audio.duration)) {
								 //播放时间显示
								setTimeShow();
								//用时间比来获取进度条的值
								var progressValue = audio.currentTime / audio.duration;
								if(progressValue == 1) {
									//当前播放完成停止播放
									audioPause();
									onoff = true;
									//播放完进度保存
									var durations = audio.duration; //获取获取视频总时长（单位秒）
									var percents = Math.round(currentTimes * 100 / durations); //四舍五入进度
									var tempTimeEnd = parseInt(currentTimes, 10); //当前播放时刻转换
									//intervalFun(percents, tempTimeEnd);
									

								}

							};
						}, false);
						audio.addEventListener("pause",
							function() { //音频监听暂停时保存当前进度
								var currentTime = audio.currentTime; //获取当前的播放时刻（单位秒）
								var duration = audio.duration; //获取获取视频总时长（单位秒）
								var percent = Math.round(currentTime * 100 / duration); //四舍五入进度
								var tempTimes = parseInt(currentTime, 10); //当前播放时刻转换
								intervalFun(percent, tempTimes); //调取延时请求函数saveTask
							}, false);
						// 进度条控制
						timeline.addEventListener('touchend', function(e) {							
							var x = e.changedTouches[0].clientX - this.offsetLeft;　　　　　　　　　　
							var X = x < 0 ? 0 : x;　　　　　　　　　　
							var W =this.offsetWidth;　　　　　　　　　　
							var place = X > W ? W : X;　
							//是否允许用户快进
							if(progressBtn >= 100) {
								audio.currentTime = (place / W).toFixed(2) * audio.duration　　　　
								progress.style.width=(place / W).toFixed(2) * 100 + "%";　　　　
								
							}　　　　　　　　　　　

						});
						// 设置播放时间
						function setTimeShow() {　　　　　　　　　　　　　　　　　　　　
							var playTime = secondToMin(audio.currentTime);　
							var duration = audio.duration === Infinity ? null : audio.duration;
							var durations=secondToMin(duration);
							loadTitle.style.display='none';
							size.innerHTML=playTime;　
							timeshow.innerHTML=durations;
							progress.style.width=( audio.currentTime / duration).toFixed(4) * 100 + "%"　　　　　　　　　　　　　
							　　　　　　　
						}　　　　　　　
						// 计算时间　　　　　　　　
						function secondToMin(s) {　　　　　　　　　　
							var MM = Math.floor(s / 60);　　　　　　　　　　
							var SS = s % 60;　　　　　　　　　　
							if(MM < 10) {
								MM = "0" + MM;　　
							}　　　　　　　　　　　　　　　　　　　　
							if(SS < 10) {
								SS = "0" + SS;　
							}　　　　　　　　　　　　　　　　　　　　
							var min = MM + ":" + SS;　　　　　　　　
							return min.split('.')[0];　　　　　　　　　　
						}

						isPalyControl.onclick = function() {
							palyControl();
							onoff = !onoff;

						}
						showPalyImg.onclick = function() {
							palyControl();
							onoff = !onoff;

						}
						//播放暂停切换
						function palyControl() {
							if(onoff) {
								audioPlay();
							} else {
								audioPause();
							}
						}
						//播放
						function audioPlay() {
							audio.play();
							//console.log(audio.networkState) //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
							if(audio.error != null) {
								console.log(audio.error.code) //1.用户终止 2.网络错误 3.解码错误 4.URL无效
							}
							isPalyControl.style.height = 0.26 + 'rem';
							isPalyControl.style.background = 'url("../../../static/icon-audio-pause.png") no-repeat center center';
							isPalyControl.style.backgroundSize = '100% 100%';
							showPalyImgBox.style.display = 'none';
							//播放动效
							audioShowImg.style.animation = 'say 12s linear infinite';
							audioShowImg.style.WebkitAnimation = 'say 12s linear infinite';
							audioShowImg.style.MozAnimation = 'say 12s linear infinite';
							audioShowImg.style.MsAnimation = 'say 12s linear infinite';
							audioShowImg.style.OAnimation = 'say 12s linear infinite';

							// $('#audio-show-img').css({"-webkit-animation":"say 12s linear infinite","-moz-animation":"say 12s linear infinite","-ms-animation":"say 12s linear infinite","animation":"say 12s linear infinite"});

						};
						//暂停
						function audioPause() {
							audio.pause();
							isPalyControl.style.height = 0.22 + 'rem';
							isPalyControl.style.background = 'url("../../../static/icon-audio-play.png") no-repeat center center';
							isPalyControl.style.backgroundSize = '100% 100%';
							showPalyImgBox.style.display = 'block';
							//关闭播放动效
							audioShowImg.style.animation = 'stopSay 2s linear infinite';
							audioShowImg.style.WebkitAnimation = 'stopSay 2s linear infinite';
							audioShowImg.style.MozAnimation = 'stopSay 2s linear infinite';
							audioShowImg.style.MsAnimation = 'stopSay 2s linear infinite';
							audioShowImg.style.OAnimation = 'stopSay 2s linear infinite';

							// $('#audio-show-img').css({"-webkit-animation":"stopSay 2s linear infinite","-moz-animation":"stopSay 2s linear infinite","-ms-animation":"stopSay 2s linear infinite","animation":"stopSay 2s linear"});
						};
						//保存audio进度
						function intervalFun(progre, times) {
							axios.post(global_set.host + "/plan/myTask/saveTask", $.param({
									access_token: that.token,
									planId: that.planId,
									courseId: that.courseId,
									resourceId: that.resourceId,
									courseType: 2,
									progress: progre,
									tempTime: times,
									timeStamp: Date.parse(new Date()),
								}))
								.then((data) => {

								})
								.catch(function(err) {

								})
						};
					})
				})
				.catch(function(err) {
					//console.log(err);
				})

		},

	}
</script>

 

效果如下：

CloudEmperor
关注
专栏目录
【Vue2】音乐播放器
qq_51630625的博客
04-11 857
【Vue2】音乐播放器 需求： 1、输入关键词发起axios请求，获取播放列表 2、点击播放按钮，根据点击的数据id值，发起axios请求获取音频播放路径，并在<audio>标签下的src属性使用该路径，并使黑胶唱片区域开始动画 3、根据播放时的音频id值，发起axios请求获取热门留言区域 4、当点击MV图标时,根据选择视频的id值发起axios请求，播放对应视频，点击空白区域暂停并退出视频 遇到的问题： 问题一： 多次重复写了axios根路径 代码不足够简洁，利用率不高，没有复用性 应当
vue 移动端---语音播放--原生audio（类似百度翻译的语音播放）
DcTbnk的博客
06-08 902
原生audio---语音播放*可下载进行测试的音频网站1.效果图2.一些audio相关的代码知识上图效果代码展示--vue项目 *可下载进行测试的音频网站 →点击可查看—可下载的音频网站 1.效果图 上图效果的代码请查看博文→点击可查看（写成了父子组件形式） 我目前写的主要展示的是单个语音的播放，如下图所示，我参考的文章地址是 → 点击可查看 多个语音的播放顺序问题，可查看文章→点击可查看 2.一些audio相关的代码知识 // 重新加载 this.audio.load(); // 判断是否正在播放
spring boot + vue3 接入钉钉实现扫码登录
最新发布
andrew_dear的博客
08-01 1023
应用类型介绍 - 钉钉开放平台 (dingtalk.com)应用能力介绍 - 钉钉开放平台 (dingtalk.com)扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com)
在VUE中播放音频（audio介绍与使用）
热门推荐
qq_45820271的博客
08-25 3万+
本文介绍了如何使用audio标签播放音频，并在vue2,vue3以及uniapp中使用
vue移动端用audio做背景音乐
liuguochao1024的博客
09-28 4764
我遇到的坑，主要就是移动端的问题和切换路由导致背景音乐暂停的问题 者可以用一个套路来解决：把audio卸载index.html中，写下来上代码 1，html部分 2，js部分 在index.html底部添加一个script标签，用来监听事件，使音乐自动播放 function audioAutoPlay(id){             var audio = document.get...
vue2 audio音频播放
weixin_1095的博客
05-26 9412
在audio标签中存在如下属性：autoplay：是否音频在就绪后马上播放。controls：是否向用户显示控件，比如播放按钮。loop：是否音频结束时重新开始播放。preload：是否音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src：要播放的音频的 URL。HTML5 audio支持的音频格式有wav，mp3和ogg格式。ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。mp3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。
Vue2.0 实现移动端图片上传功能
10-18
Vue2.0实现移动端图片上传功能涉及的技术点包括前端表单处理、文件选择、图片预览、图片上传限制以及第三方库的使用等。 首先，使用Vue2.0来创建一个图片上传功能，关键在于如何使用`input`标签。`input`标签的类型...
vue2.0 better-scroll 实现移动端滑动的示例代码
08-28
本文主要介绍了使用 Vue2.0 和 Better-Scroll 实现移动端滑动的示例代码，着重于左右联动效果的实现方法。 Better-Scroll 介绍 Better-Scroll 是一个 JavaScript 库，用于实现移动端滑动效果。它提供了多种滑动...
h5移动端仿钉钉组织架构的选择部门功能
12-02
博客地址https://blog.csdn.net/weixin_44484452/article/details/121638096?spm=1001.2014.3001.5501 本资源比博客的补充了顶部面包屑功能
vue-happy-scroll:基于vue2.0实现的滚动条插件。scroll component for vue2.0
04-14
当前版本不支持移动端(还未在移动端进行过测试)。The current version not support SP(I haven't tested it on the smartphone yet). Feature: 保留原生滚动条功能 支持动态设置滚动条颜色 支持设置滚动条的位置...
基于vue2.0仿天猫移动端首页的SPA
07-19
本文将深入探讨Vue2.0的关键特性，并以其在仿制天猫移动端首页SPA项目中的应用为例，展示其在实际开发中的实践。 **一、Vue2.0核心特性** 1. **虚拟DOM**：Vue2.0使用虚拟DOM技术，提高了性能，降低了DOM操作的...
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件
08-10
vueAudio-customStyle-palyer, 一个audio标签自定义样式的vue组件
vue-audio-better-易于为Vue 2.x创建自定义音频播放器组件。 有灵魂的进度条。-Vue.js开发
05-27
vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件，非常感谢您的 star! Simple, f vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件，非常感谢您的 star! Simple, fun audio components, Thank you for your star! Overview Normal Mini Installation npm install vue-audio-better --save Update Add a mini audio component. Setup Bundl
vue-audio-音频标签包装器； Vue 2.x的声音播放器组件-Vue.js开发
05-27
Vue.js声音播放器Vue.js声音播放器UI。 涵盖了音频标签API并添加了更多内容。 演示在此处查看DEMO安装使用npm：npm install vue-audio-Vue.js声音播放器Vue.js声音音频播放器UI。 涵盖了音频标签API并添加了更多内容。 演示在这里查看DEMO安装使用npm：npm install vue-audio --save或bower：bower install vue-audio用法从“ vue-audio”中添加组件import VueAudio； 在模板中使用 该组件具有以下属性：文件（字符串），必填； autoPlay（布尔值），可选，默认情况下为false； 循环（布尔值），可选，默认情况下为false； 用于样式
vue audio原生写法
05-18
vue audio原生写法 带倍速
基于vue-element组件实现音乐播放器功能
08-27
主要介绍了基于vue-element组件实现音乐播放器功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
web前端：H5-audio原生标签，制作音阶导航
cevent的博客
01-28 349
1.效果图 2.less * { margin: 0; padding: 0; } html { height: 100%; overflow: hidden; body { height: 100%; #wrap { height: 100%; width: 100%; position: absolute; background: #
vue组件可视化_Vue HTML5音频可视化组件
cuk5239的博客
07-23 4163
vue组件可视化 视听 (vue-audio-visual) VueJS audio visualization components. VueJS音频可视化组件。 Vue HTML5 audio visualization components. Vue HTML5音频可视化组件。 An audio spectrum visualizer plugin for VueJS framewo...
基于vue3的移动端音乐播放器
qq_46186155的博客
05-02 2239
项目介绍 这是一个基于vue3的移动端音乐项目，具有歌单、音乐搜索、音乐播放、登录等功能，后期会更新完善功能。 它具有以下不错的地方： 1. 使用rem布局来应对不同设备，保证设备之间的兼容性。 2. 具有比较完善的功能（后续会继续更新），歌单、音乐的搜索及播放，登录功能，路由拦截。 3. 歌词会随着音乐的播放动态变化。 4. 排行榜请求数据较多，增加了骨架屏来缓解白屏现象。 5. 使用最新的vue3 Componsition API 风格来编写代码，使组件之间的逻辑更加内聚。 项目内容 首页 歌曲播放
Vue 2.0单页应用实战：组件化、路由与数据管理
本篇文章详细介绍了如何使用Vue 2.0构建一个高效的单页应用实战，通过结合Vue CLI、vue-router、vuex以及vue-resource等工具，提升开发效率和用户体验。以下是文章的主要知识点： 1. **项目初始化**：使用vue-cli...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值