博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 播放音频
阅读量:4094 次
发布时间:2019-05-25

本文共 1875 字,大约阅读时间需要 6 分钟。

js 代码

两个事件,两个方法
一个开始播放事件,
一个暂停事件
一个获取音频路径的方法
一个点击事件,进行暂停和播放

play_star(){
// this.$refs.audio.load(); if (this.click_play){
let aa1 = this.$refs.audio.duration; this.$message({
message: aa1, type: 'success' }); // console.log(this.$refs.audio.duration) } }, get_record_path(){
let abc = 'http://m10.music.126.net/20191215175552/30028a9338ba308434d95363d04e83a9/ymusic/25f5/77be/0264/427ec62ea7b1030f6fe5f9a4b84c9c83.mp3'; return abc }, // 播放 aclick(){
let path = this.get_record_path(); let aa = this.$refs.audio.src; if (typeof aa === 'undefined' && aa === ''){
// 判断是否为空 this.$refs.audio.src = path; this.$refs['audio'].play(); }{
if (aa === path){
// 如果路径相同,说明是同一首歌 if (this.$refs.audio.currentTime > 0 ){
// this.$refs['audio'].play(); // 如果大于0, 说明已经开始播放 if (this.$refs['audio'].paused){
this.$refs['audio'].play(); }else {
this.$refs['audio'].pause(); } }else {
this.$refs['audio'].play(); } }else {
// 如果路径不同,说明换了位置了。 this.$refs.audio.src = path; this.$refs['audio'].play(); } } },

转载地址:http://xlvii.baihongyu.com/

你可能感兴趣的文章
Redis设计与实现之数据结构与对象—SDS
查看>>
Redis设计与实现之数据结构与对象—链表
查看>>
Redis设计与实现之数据结构与对象—跳跃表
查看>>
Redis设计与实现之数据结构与对象—整数集合
查看>>
Redis设计与实现之数据结构与对象—压缩列表
查看>>
Redis设计与实现之数据结构与对象—对象
查看>>
分布式数据库中间件—TDDL的使用介绍
查看>>
Netty入门简介
查看>>
深入理解ElasticSearch—ES简介
查看>>
spring知识点概括
查看>>
Java NIO详解
查看>>
深入理解ElasticSearch—查询DSL进阶
查看>>
深入理解ElasticSearch—顶层索引控制
查看>>
线程池学习--伊始
查看>>
java调用oracle存储过程,报错SQLException :Cursor is closed
查看>>
机器学习中的稀疏表示与字典学习
查看>>
TensorFlow--学习笔记
查看>>
《数学之美》中的自然语言处理
查看>>
反向传播算法-step by step
查看>>
matlab 稀疏矩阵求 特征值
查看>>