zoukankan      html  css  js  c++  java
  • iviewtable表格数据 录音播放下载

    播放下载:

    {
    title: '通话录音',
    align: 'center',
    key: 'recordUrl',
    render: (h, params) => {
    if (params.row.recordUrl.substr(-3) == 'wav') {
    return h('div', {
    style: {

    }
    }, [
    h('audio', {
    style: {
    textAlign: 'center',
    padding: '4px',
    '100px'
    },
    attrs: {
    src: 'http://ai.foxcall.cn' + params.row.recordUrl,
    id: params.row.id,
    'data-flag': true
    }
    }, params.row.recordUrl),
    h('i', {
    style: {
    'font-style': 'normal',
    'color': '#2d8cf0',
    'cursor': 'pointer'
    },
    on: {
    click: () => {
    this.play(params)
    }
    }
    }, '播放'),
    h('a', {
    'style': {
    margin: '0 4px',
    'color': '#2d8cf0',
    'cursor': 'pointer',
    'margin': '0 2px'
    },
    attrs: {
    href: 'http://ai.foxcall.cn' + params.row.recordUrl
    }
    }, '下载')
    ])
    } else {
    return h('div', [
    h('Tooltip', {
    props: { placement: 'bottom' }
    }, [
    h('span', {
    style: {
    display: 'inline-block',
    params.column._width * 0.9 + 'px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    zIndex: 99
    }
    }, params.row.recordUrl),
    h('span', {
    slot: 'content',
    style: { whiteSpace: 'normal', wordBreak: 'break-all' }
    }, params.row.recordUrl)
    ])
    ])
    }
    }
    },

    播放:

    play (value) {
    let id = value.row.id
    let i = document.getElementById(id).nextElementSibling
    let au = document.getElementById(id)
    let end_time = au.duration
    if (au.dataset.flag == 'true') {
    au.play()
    i.textContent = '暂停'
    i.style.cssText = 'color:red;font-style:normal;cursor:pointer'
    au.dataset.flag = false
    } else {
    au.pause()
    i.textContent = '播放'
    i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
    au.dataset.flag = true
    }
    var count_interval = setInterval(function () {
    if (au.currentTime == end_time) {
    i.textContent = '播放'
    i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
    au.dataset.flag = true
    clearInterval(count_interval)
    }
    }, 1000)
    },
    多多指教,我还是前端小生
  • 相关阅读:
    常用MySQL函数连接
    spring boot和mybatis的多源配置亲测可用非常简单哦铁闸门
    RestTemplate请求发送post请求携带数组参数(亲测有效)
    idea配置tomcat
    前后端分离生成手机验证码
    前后端分离的图片验证保存及发送方式
    Java—大文件分片上传
    SpringAOP实战
    Spring Boot AOP的使用
    iOS开发日常记录
  • 原文地址:https://www.cnblogs.com/yangslin/p/11308022.html
Copyright © 2011-2022 走看看