music.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. // 导入ElMessage组件
  2. import { ElMessage } from 'element-plus';
  3. // 导入音乐文件 - 使用ES模块导入方式
  4. import huankuaiMp3 from '@/assets/music/huankuai.mp3';
  5. import shuhuanMp3 from '@/assets/music/shuhuan.mp3';
  6. // 音乐类型配置(独立配置,不直接关联颜色)
  7. export const musicTypeConfig = {
  8. '热闹': {
  9. url: huankuaiMp3, // 使用导入的变量
  10. name: '热闹音乐'
  11. },
  12. '舒缓': {
  13. url: shuhuanMp3, // 使用导入的变量
  14. name: '舒缓音乐'
  15. }
  16. };
  17. // 播放音乐函数 - 修改为接受参数而不是直接使用外部变量
  18. export const playMusic = (musicType, state, musicPlayer) => {
  19. console.log(`播放音乐类型: ${musicType}`);
  20. // 检查是否有对应的音乐配置
  21. if (musicTypeConfig[musicType]) {
  22. const musicInfo = musicTypeConfig[musicType];
  23. // 更新音乐播放状态
  24. state.currentMusicUrl = musicInfo.url;
  25. state.currentMusicName = musicInfo.name;
  26. // 延迟播放,确保audio元素已经更新了src
  27. setTimeout(() => {
  28. if (musicPlayer.value) {
  29. try {
  30. musicPlayer.value.play();
  31. state.isMusicPlaying = true;
  32. ElMessage.success(`正在播放: ${musicInfo.name}`);
  33. } catch (error) {
  34. console.error('播放音乐失败:', error);
  35. ElMessage.error('播放音乐失败,请稍后重试');
  36. }
  37. } else {
  38. console.error('音乐播放器元素未找到');
  39. ElMessage.error('音乐播放器初始化失败');
  40. }
  41. }, 100);
  42. } else {
  43. // 如果没有找到对应类型的音乐,使用默认音乐
  44. const defaultMusicType = '舒缓';
  45. const musicInfo = musicTypeConfig[defaultMusicType];
  46. state.currentMusicUrl = musicInfo.url;
  47. state.currentMusicName = musicInfo.name;
  48. setTimeout(() => {
  49. if (musicPlayer.value) {
  50. try {
  51. musicPlayer.value.play();
  52. state.isMusicPlaying = true;
  53. ElMessage.success(`正在播放默认音乐: ${musicInfo.name}`);
  54. } catch (error) {
  55. console.error('播放音乐失败:', error);
  56. ElMessage.error('播放音乐失败,请稍后重试');
  57. }
  58. } else {
  59. console.error('音乐播放器元素未找到');
  60. ElMessage.error('音乐播放器初始化失败');
  61. }
  62. }, 100);
  63. }
  64. };
  65. // 停止播放音乐 - 修改为接受参数
  66. export const stopMusic = (state, musicPlayer) => {
  67. if (musicPlayer.value) {
  68. musicPlayer.value.pause();
  69. // 重置播放进度
  70. musicPlayer.value.currentTime = 0;
  71. // 更新状态
  72. state.isMusicPlaying = false;
  73. state.currentMusicUrl = '';
  74. state.currentMusicName = '';
  75. console.log('音乐已停止播放');
  76. }
  77. };
  78. // 处理音乐播放结束事件
  79. export const onMusicEnded = (state) => {
  80. state.isMusicPlaying = false;
  81. state.currentMusicUrl = '';
  82. state.currentMusicName = '';
  83. console.log('音乐播放结束');
  84. };
  85. // 播放mp3文件
  86. export const playMp3 = async function(audioUrl) {
  87. if (!audioUrl) {
  88. console.error('音频URL为空');
  89. return;
  90. }
  91. try {
  92. // 创建音频对象,播放声音特效
  93. const soundEffect = new Audio(audioUrl);
  94. // 非阻塞方式播放音频
  95. soundEffect.play().catch(error => {
  96. console.error('播放声音特效失败:', error);
  97. });
  98. } catch (error) {
  99. console.error('创建声音特效失败:', error);
  100. }
  101. };