朵拉 发表于 2024-2-26 23:08

谁动了我的琴弦（马黑黑原创）

本帖最后由 朵拉 于 2024-2-26 23:24 编辑 <br /><br /><style>
#mydiv {
   margin: 0 0 0 calc(50% - 593px);
   position: relative;
    width: 1024px;
    height: 640px;

  background: url('https://pic.imgdb.cn/item/65ce04eb9f345e8d03bddb08.jpg') no-repeat center/cover;


    border: 1px solid gray;
    position: relative;
}
#player {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    animation: rot 5s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
    <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/07/19/0decda15fafe3e6b1149935a61c7e0be.mp3"></audio>
    <img id="player" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
</div>

<script>

var flashId; //setTimeout定时器运行ID: 用于音频不允许自动播放时

//联动函数 : 与音频播放暂停同步联动 - 关键帧动画、播放器提示语
mState = () => {
    aud.paused
      ? (mydiv.style.setProperty('--state','paused'), player.title = '点击播放')
      : (mydiv.style.setProperty('--state','running'), player.title = '点击暂停')
    ;
};

//flash函数 : 音频禁止自动播放是调用 - 播放器变大变小，引导访问者点击
flash = () => {
    let idx = Math.round(Math.random());
    let val = ;
    player.style.transform = `scale(${val})`;
    //setTimeout定时器递归调用此函数
    flashId = setTimeout(flash,300);
};

//aud.play事件Promise链式处理
aud.play().then(() => {
    mState(); //音频正常自动播放 : 运行联动函数
}).catch(err => { //俘获错误
    if (err.name === "NotAllowedError") {
      flash(); //禁止自动播放时运行flash函数
    } else {
      alert(err); //音频加载出错时显示错误信息
    }
    mState(); //即便不能播放也要运行联动函数
});

//下面是两个audio控件监听事件
aud.addEventListener('pause', mState);
aud.addEventListener('playing', mState);

//播放按钮点击事件
player.onclick = () => {
    //如果 flashID 活跃中（不能自动播放时会被赋值）
    if(flashId) {
      flashId = clearTimeout(flashId); //销毁它
      //复原播放器的transform 属性让道给animation）
      player.style.transform = 'unset';
    }
    //按钮自己本分活儿 : 音频播放时停放、暂停时播放
    aud.paused ? aud.play() : aud.pause();
}

</script>

朵拉 发表于 2024-2-26 23:24

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-2-26 23:43

辛苦哈

红影 发表于 2024-2-27 11:04

漂亮。欣赏朵宝好帖{:4_204:}

樵歌 发表于 2024-2-27 11:40

优秀作业{:4_187:}
页: [1]
查看完整版本: 谁动了我的琴弦（马黑黑原创）