ThinkAdmin/app/wechat/view/api/view/music.html

{extend name='api/view/main'}

{block name='content'}
<div class="header"><span>{:date('H:i')}</span></div>
<div class="container">
    <div class="logo">Ta</div>
    <div class="content arrow" style="white-space:nowrap">
        <div style="display:inline-block;overflow:hidden;text-overflow: ellipsis">
            <div class="content-title">{$title|default=''}</div>
            <div class="content-content">{$desc|default=''}</div>
        </div>
        <a href="javascript:void(0)" id="AudioBtn" class="content-button icon icon-play"></a>
    </div>
</div>
<audio style="display:none" id="AudioSrc">
    <source src="{$url|default=''}">
</audio>
<script>
    (function (audio, button) {
        audio.onerror = function () {
            button.className = 'icon icon-play';
        };
        button.onclick = function () {
            audio.paused ? audio.play() : audio.pause()
        };
        button.onapply = function () {
            button.className = audio.paused ? 'icon icon-play' : 'icon icon-pause';
        };
        setInterval(button.onapply, 500), button.onapply();
    })(document.getElementById('AudioSrc'), document.getElementById('AudioBtn'));
</script>
{/block}

{block name='style'}
<style>
    .content {
        color: #fff;
        width: 58vw !important;
        border: none !important;
        background: #080 !important;
        white-space: nowrap !important
    }

    .content-title {
        width: 7.5rem;
        overflow: hidden;
        font-size: .6rem;
        text-overflow: ellipsis
    }

    .content-button {
        top: 1.4rem;
        float: right;
        right: 0.8rem;
        position: absolute;
    }

    .content-content {
        color: #ccc;
        width: 7.5rem;
        overflow: hidden;
        font-size: .5rem;
        text-overflow: ellipsis;
    }

    .content .icon {
        color: #fff;
        top: -.5rem;
        font-size: 1.5rem;
        position: relative;
    }

    .container .content:after,
    .container .content:before {
        border-color: transparent #080 transparent transparent !important
    }
</style>
{/block}