原生audio 实现音频播放器功能

一 背景:项目为了引导授信、增加曝光度,在详情页添加了XX学院这一模块,为了引导用户购买我们单独专业的课程

二 实现效果: 初期预计的实现效果是用音频播放我们的课程,暂定的一期只有音频资源

三 现状:目前项目的视频播放组件用的是百度熊掌号下的资源和插件,并且没有音频相关的资源。所以问题就是需要开发新的可以播放音频的音频播放器。

四 问题

    1.  currentTime 无法设置,这里遇到了一个这样的问题,每当点击进度条做跳转的时候,需要重新设置音频的播放进度,这里就涉及到重置audio的currentTime
      然而每次点击的话,currentTime都会被重置为0,怪异的是在谷歌浏览器中是有问题的,火狐、ios的safari都是没有问题,最开始以为是兼容的问题,更改了代码
      最后发现是谷歌浏览器对于流媒体
    2. 原生样式覆盖 firefox不能设置
    3. 跳帧实现
    4. 更新进度条实现
    5. 转换时间
    6. 结束时间的状态
    7. 监听进度条改变、监听结束
    8. 遇到的数据源的问题 也就是duration 不准确 不能被压缩
    9. 拖动播放问题
    10. 进度问题 切换了定时器也是无效 最后发现 和自己写的js精度有关 使用了Math.round + Math.floor 计算进度百度比 但是发现使用后,进度条更新慢,去掉后更新快
      个人猜测,计算精度需要一定的时间,所以定时器太快 但是精度运算的结果太慢,导致进度条更新也很慢
    11. loadedmetadata  的兼容问题 在火狐和chrome上一个执行一个不执行

    12. mp4 格式在ios 无法播放 原因:初步断定是压缩格式导致的,因为换一个url就可以了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于原生 JavaScript 的音乐播放器搜索功能代码示例: HTML 结构: ```html <div class="music-player"> <input type="text" id="search-input" placeholder="搜索歌曲"> <ul id="playlist"> <li data-src="path/to/song1.mp3">歌曲1</li> <li data-src="path/to/song2.mp3">歌曲2</li> <li data-src="path/to/song3.mp3">歌曲3</li> <!-- 其他歌曲 --> </ul> <audio id="audio-player"></audio> </div> ``` CSS 样式: ```css .music-player { width: 100%; max-width: 500px; margin: 0 auto; } #search-input { width: 100%; padding: 10px; font-size: 16px; border: none; border-bottom: 1px solid #ccc; outline: none; margin-bottom: 10px; } #playlist { list-style: none; padding: 0; margin: 0; } #playlist li { padding: 10px; border-bottom: 1px solid #ccc; cursor: pointer; } #playlist li:hover { background-color: #f2f2f2; } ``` JavaScript 代码: ```js const searchInput = document.getElementById("search-input"); const playlist = document.getElementById("playlist"); const audioPlayer = document.getElementById("audio-player"); // 歌曲列表 const songs = [ { title: "歌曲1", src: "path/to/song1.mp3" }, { title: "歌曲2", src: "path/to/song2.mp3" }, { title: "歌曲3", src: "path/to/song3.mp3" }, // 其他歌曲 ]; // 初始化歌曲列表 function initPlaylist() { playlist.innerHTML = ""; for (let i = 0; i < songs.length; i++) { const song = songs[i]; const li = document.createElement("li"); li.textContent = song.title; li.setAttribute("data-src", song.src); playlist.appendChild(li); } } // 搜索歌曲 function searchSongs() { const query = searchInput.value.trim().toLowerCase(); const filteredSongs = songs.filter(song => song.title.toLowerCase().includes(query) ); playlist.innerHTML = ""; for (let i = 0; i < filteredSongs.length; i++) { const song = filteredSongs[i]; const li = document.createElement("li"); li.textContent = song.title; li.setAttribute("data-src", song.src); playlist.appendChild(li); } } // 播放歌曲 function playSong(src) { audioPlayer.src = src; audioPlayer.play(); } // 初始化 initPlaylist(); // 监听搜索输入框变化 searchInput.addEventListener("input", searchSongs); // 监听歌曲列表点击 playlist.addEventListener("click", e => { const li = e.target.closest("li"); if (li) { const src = li.getAttribute("data-src"); playSong(src); } }); ``` 这段代码会在页面上创建一个音乐播放器,其中包含一个搜索框、一个歌曲列表和一个音频播放器。当用户在搜索框中输入查询时,会根据搜索关键词过滤歌曲列表。当用户点击歌曲列表中的某一项时,会播放该歌曲。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值